在 Spark (Flex) 中使选项卡闪烁

Question

在 Flex 4 应用程序（带有 Spark 组件）中，我有一个带有各种屏幕的 ViewStack 和一个在它们之间导航的 TabBar。我希望屏幕能够在其中发生某些事情时“闪烁”其选项卡（例如 Windows 任务栏按钮）。

我该怎么做？我的想法是通过在闪烁时将 * 放入屏幕的 label（继承自 NavigatorContent）中，并以某种方式在自定义标签栏皮肤中读取它，从而将闪烁状态破解。

有没有更简单的方法？如果现在，我该如何实现我的？

Answer 1

这有点难以解释，因为这不是最简单的事情，但我会尽力而为。我将创建一个<s:TabBar />，其中包含视图堆栈中所有视图的数组的dataProvider，并为您的TabBar 创建一个自定义项渲染器，然后包含一个自定义组件，该组件扩展ButtonBarButton，该组件具有2 向绑定的闪烁属性和自定义皮肤实际上显示它闪烁，如下所示： （满嘴的男人）

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:local="*">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
        ]]>
    </fx:Script>
    <s:TabBar dataProvider="{new ArrayList([view1,view2])}">
        <s:itemRenderer>
            <fx:Component>
                <local:BlinkingTab label="{data.label}" blink="@{data.isBlinking}" skinClass="BlinkingTabSkin" />
            </fx:Component>
        </s:itemRenderer>
    </s:TabBar>
    <mx:ViewStack>
        <local:Foo id="view1" label="View 1" />
        <local:Foo id="view2" label="View 2" />
    </mx:ViewStack>
</s:Application>

在这种情况下，我的视图扩展了“NavigatorContent”，但是，我们需要能够表达一个布尔标志来表示选项卡需要闪烁，如下所示：

<s:NavigatorContent xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         implements="ITabView">
    <fx:Script>
        <![CDATA[
            private var _blink:Boolean = false;

            [Bindable]
            public function get isBlinking():Boolean
            {
                return this._blink;
            }

            public function set isBlinking(value:Boolean):void
            {
                this._blink = value;
            }
        ]]>
    </fx:Script>
</s:NavigatorContent>

您会注意到视图正在实现 ITabView。这仅用于对“isBlinking”属性进行类型检查，但它是可选的。当您希望标签闪烁时，只需将其设置为“true”。但现在我们需要让选项卡真正闪烁。在我们为 TabBar 创建的自定义组件“BlinkingTab”中，我们需要获取 blink 属性并适当地更改皮肤状态，如下所示：

<s:ButtonBarButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            private var _blink:Boolean;

            [Bindable]
            public function get blink():Boolean
            {
                return this._blink;
            }

            public function set blink(value:Boolean):void
            {
                this._blink = value;
            }

            override protected function getCurrentSkinState():String
            {
                if(!selected && enabled && this._blink)
                {
                    return super.getCurrentSkinState()+'Blinking';
                }else{
                    return super.getCurrentSkinState();
                }
            }

            override protected function mouseEventHandler(event:Event):void
            {
                super.mouseEventHandler(event);
                if(event.type == MouseEvent.CLICK)
                {
                    blink = false;
                }
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

您会注意到，如果皮肤状态已启用且未选中，则其上只会显示“闪烁”字符串。如果被选中，它不会闪烁；如果用户单击选项卡，它将删除应该传播回视图的闪烁标志（我不确定这部分，总是可以覆盖“选定”属性或其他东西）。最后一部分是皮肤；您需要创建一个自定义皮肤，以便您可以将闪烁动画添加到您的选项卡。只需使用使用 TabBarButtonSkin 的 ButtonBarButton 宿主组件创建一个新外观并添加这些新状态：

<s:State name="upBlinking" basedOn="up" stateGroups="blinking" />
<s:State name="overBlinking" basedOn="over" stateGroups="blinking" />
<s:State name="downBlinking" basedOn="down" stateGroups="blinking" />

从这里开始，您需要创建自己的基于状态的闪烁。这还没有经过全面测试，但我想我帮助你完成了 95% 的工作。希望这会有所帮助。

顺便说一句，这种方法是 100% 合法的。没有黑客攻击，您可以在其他地方重用代码的每一部分:)