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才能确定。

翻车停止工作

1 个答案: