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

Question

我有一个 Spark 组件，它在可见时运行一些动画（通过计时器）。

该组件应该：

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

。

<!-- 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 按钮时，计时器停止 - 您可以看到“调试”标签也停止。

您可以看到，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 不存在。这些只是一个愿望。

注意：有 show 和 hide 属性，但它们处理 visible 属性（无论如何，它仍然设置为 true状态变化）。

Answer 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>