Question

在Flex 4应用程序中（使用Spark组件）我有ViewStack个不同的屏幕，TabBar可以在它们之间导航。我希望屏幕能够在其中发生某些事情时“闪烁”其标签（如Windows任务栏按钮）。

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

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

Answer 1

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

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

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

<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％合法的。没有黑客攻击，你可以在其他地方重用代码的每一部分：）

在Spark（Flex）中使选项卡闪烁

1 个答案: