翻转停止工作

Question

我对翻转效果有一个小问题。第一次加载后一切正常。但是，单击按钮两次（= 进入 StudyState，然后返回 Sate1）后，bordercontainer 上的翻转效果将停止工作。 我不知道原因是什么。请给我一个提示。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
    <s:AnimateColor id="animateColorON" colorPropertyName="backgroundColor" colorFrom="#FFFFFF" colorTo="#e7eae4" duration="300"/>
    <s:AnimateColor id="animateColorOFF" colorPropertyName="backgroundColor" colorFrom="#e7eae4" colorTo="#FFFFFF" duration="600"/>
</fx:Declarations>

<s:transitions>
    <s:Transition id="t1" autoReverse="true">
        <s:CrossFade
            target="{this}" 
            duration="1500" />
    </s:Transition>
</s:transitions>
<s:states>
    <s:State name="State1" />
    <s:State name="studyState" />
</s:states>

<s:VGroup id="globalGroup" includeIn="State1" width="100%">
    <s:Button label="State1 to studyState" click="this.currentState = 'studyState'" />
    <s:BorderContainer width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF">
        <s:HGroup width="100%" height="30" verticalAlign="middle" paddingLeft="5" paddingRight="5">
            <s:Label id="p_dob_label" text="text" width="55%"/>
            <s:Label id="p_dob_value" text="text" width="40%" verticalAlign="top" textAlign="right" color="#8DA576"/>
        </s:HGroup>
    </s:BorderContainer>
</s:VGroup>
<s:VGroup id="studyGroup" includeIn="studyState" width="100%">
    <s:Button label="studyState to State1" click="this.currentState = 'State1'"  />
</s:VGroup> 

</s:Application>

Answer 1

这是一个修复。添加状态更改时的事件侦听器。我使用currentStateChangeevent：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" currentStateChange="application1_currentStateChangeHandler(event)">

在监听器中，手动设置rollOverEffect和rollOutEffect效果：

<fx:Script>
    <![CDATA[
        import mx.events.StateChangeEvent;

        protected function application1_currentStateChangeHandler(event:StateChangeEvent):void
        {
            // TODO Auto-generated method stub
            if(bc){
                bc.setStyle('rollOverEffect',animateColorON);
                bc.setStyle('rollOutEffect',animateColorOFF);
            }
        }

    ]]>
</fx:Script>

一定要给BorderContainer一个ID。我使用了 bc：

<s:BorderContainer id="bc" width="100%" height="30" cornerRadius="4" borderVisible="false" buttonMode="true" rollOverEffect="animateColorON" rollOutEffect="animateColorOFF" >

我不确定为什么这些效果会丢失。我最好的理论是，这与 ActionScript 在幕后的生成方式有关。尽管 rollOverEffect 和 rollOutEffect 看起来是组件上的属性，但它们实际上是在幕后作为样式实现的。我敢打赌，出于某种原因，当切换状态时，“效果”样式不会重置。不过，您必须查看生成的 ActionScript 才能确定。