Question

我正在使用spark tabbar并将视图堆栈作为dataprovider .....在视图堆栈中有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 >

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

那么有没有办法获得标签的rollOverIndex或者有一个请给我一个解决方案。

- 谢谢红色

Answer 1

好吧，我的想法是使用ItemRenderer子类来处理roll_over事件并获取项索引。默认情况下，TabBar项呈示器是带有TabBarButtonSkin外观的ButtonBarButton类。和ButtonBarButton类有itemIndex属性。我们这样做：

---＆GT; 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属性：

---＆GT;放置在'events'包中的MyTabBarEvent.as的代码

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);
        }
    }
}

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

---＆GT;申请代码

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

Answer 2

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

flex Spark标签栏翻转索引

2 个答案: