检测何时通过状态更改显示或隐藏Spark组件

时间:2011-06-15 12:04:13

标签: flex4 state flex-spark

我有一个Spark组件,当可见时(通过Timer)运行一些动画。

该组件应该:

  • 在隐藏计时器时暂停计时器
  • 再次显示计时器时恢复计时器。

<!-- RandomButton.mxml-->
<?xml version="1.0"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          creationComplete="start()">
    <fx:Script><![CDATA[
        public var ticker:Timer = new Timer(1000, 0)

        private function start():void {
            ticker.addEventListener(TimerEvent.TIMER, function(e:TimerEvent):void {
                label = '' + Math.random()
            })
        }
    ]]></fx:Script>
</s:Button>

以下是如何通过 enterState + exitState 实现目标:

<!-- Main.mxml -->
<?xml version="1.0" ?>
<s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns="*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:states>
        <s:State name="STATE_1"
                 enterState="b.ticker.start()"
                 exitState="b.ticker.stop()"/>
        <s:State name="STATE_2"/>
    </s:states>

    <s:Button label="STATE_1" click="currentState='STATE_1'"/>
    <s:Button label="STATE_2" click="currentState='STATE_2'"/>

    <RandomButton id="b" includeIn="STATE_1"/>
    <s:Label text="Debug: {b.label}"/>

</s:Application>

单击STATE_2按钮时,计时器停止 - 您可以看到'debug'标签也停止。

你可以看到RandomButton需要一些外部的“帮助”来处理它的内部问题。这意味着将enterState / exitState复制到将要使用RandomButton的任何位置。这真是太可悲了。

问题

我希望RandomButton自己维持状态。像这样:

<!-- Main.mxml -->
...
    <s:states>
        <s:State name="STATE_1"/><!-- no need to poke inside the RandomButton -->
        <s:State name="STATE_2"/>
    </s:states>
...

<!-- RandomButton.mxml -->
<?xml version="1.0"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          creationComplete="start()"

          whenShown="ticker.start()"
          whenHidden="ticker.stop()" >
    ...
</s:Button>

属性 whenShown whenHidden 不存在。这些只是一个愿望。

注意:显示隐藏属性,但它们处理可见属性(仍然设置为 true 无论状态如何变化。)

1 个答案:

答案 0 :(得分:1)

以下是解决方案:

<!-- RandomButton.mxml -->
<?xml version="1.0"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"

          addedToStage="ticker.start()"
          removedFromStage="ticker.stop()"
    ...
</s:Button>