flex Spark 标签栏翻转索引

Question

我正在使用 spark tabbar 并给出了一个视图堆栈作为数据提供者.....在视图堆栈中有 n 个元素......每个元素都有一个面板......

我的代码会是这样的......

<s:tabbar dataprovider = {viewstck-id}  height="100%" width="100%"/>
<viewstack id="viewstck-id">
<navigatorContent >
     <s:panel title="title - 1"/>
 </navigatorContent >
 <navigatorContent >
     <s:panel title="title - 2"/>
 </navigatorContent >\ 
 <navigatorContent >
     <s:panel title="title - 3"/>
 </navigatorContent >

我的要求是这样的......最初选择选项卡的面板应该显示它自己的标题......假设如果我们在 tab-1 标题应该是 title-1......但是当我们将鼠标悬停在 tab-2 上，tab-1 中的面板标题应更改为 title-2，如果鼠标在 tab3 上，则 tab-1 中的面板标题应更改为 title-3 并滚动应该将其更改为选定选项卡的面板标题，即 title-1....并且以类似的方式它应该适用于所有选项卡.....

那么有什么方法可以获取标签的 rollOverIndex 或者有人请给我一个解决方案。

-- 谢谢 红色

Answer 1

使用 Spark TabBar，您可以尝试在 MouseEvent.MOUSE_OVER 上添加事件侦听器，然后检查 event.target.label 以获取选项卡名称和 event.target.itemIndex 用于鼠标悬停的选项卡的索引。

Answer 2

好吧，我的想法是使用 ItemRenderer 子类来处理翻转事件并获取项目索引。默认情况下，TabBar 项渲染器是带有 TabBarButtonSkin 皮肤的 ButtonBarButton 类。并且 ButtonBarButton 类具有 itemIndex 属性。让我们开始吧：

---> MyButtonBarItemRenderer.mxml 的代码

<?xml version="1.0" encoding="utf-8"?>
<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"
                creationComplete="creationCompleteHandler(event)"
                skinClass="spark.skins.spark.TabBarButtonSkin"
                >
    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            }

            private function rollOverHandler(e:MouseEvent) : void
            {
                var tbe:MyTabBarEvent = new MyTabBarEvent(MyTabBarEvent.ITEM_ROLL_OVER, true);
                tbe.itemIndex = this.itemIndex;
                dispatchEvent(tbe);
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

这里我们使用带有 itemIndex 属性的自定义事件：

---> MyTabBarEvent.as 的代码放在 'events' 包中

package events
{
    import flash.events.Event;

    public class MyTabBarEvent extends Event
    {
        public static const ITEM_ROLL_OVER:String = "MyTabBarEvent.ItemRollOver";

        public var itemIndex:int;

        public function MyTabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

我们现在要做的就是在我们的应用程序中处理我们的自定义事件：

--->应用程序代码

<?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"
               creationComplete="creationCompleteHandler(event)"
               >

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                tabBar.addEventListener(MyTabBarEvent.ITEM_ROLL_OVER, itemRollOverHandler);
            }

            protected function itemRollOverHandler(e:MyTabBarEvent) : void
            {
                trace ("Item " + e.itemIndex + " roll over event handled");
                tabBar.selectedIndex = e.itemIndex;
            }

        ]]>
    </fx:Script>


    <s:VGroup>
        <s:TabBar id="tabBar" dataProvider="{viewstckId}" width="100%" itemRenderer="MyButtonBarItemRenderer"/>
        <mx:ViewStack id="viewstckId">
            <s:NavigatorContent label="Title 1">
                <s:Panel title="title - 1"/>
            </s:NavigatorContent >
            <s:NavigatorContent label="Title 2">
                <s:Panel title="title - 2"/>
            </s:NavigatorContent> 
            <s:NavigatorContent label="Title 3">
                <s:Panel title="title - 3"/>
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:VGroup>
</s:Application>