Flex:为viewstack创建多列导航栏

Question

我已经创建了一个视图堆栈，并使用Tile组件和重复的LinkButtons，我能够使用视图堆栈作为数据提供程序进行多列导航。我的问题是，这可以做得更好吗？我的代码如下，我想知道我是不是绕过了这个方法。

<?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">
    <s:layout>
        <s:BasicLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var _listItem:Object;
            private var n:int=0;
            public function get listItem():Object
            {
                return this._listItem;
            }

            public function set listItem(listItem:Object):void
            {
                try{n++;
                    this.changeSelection(this._listItem);               
                }catch(e:Error){}
                if(n==1 || n > this.viewStack.length){
                    this._listItem = listItem;
                    this.changeSelection(listItem);
                }
            }

            private function setSelection(obj:Object):void{
                this.viewStack.selectedIndex = this.viewStack.getChildIndex(this.viewStack.getChildByName(obj.target.getRepeaterItem().name));
                this.listItem = obj.target; 
            }
            private function checkSelection(obj:Object):void{               
                if(obj.target.getRepeaterItem() == this.viewStack.selectedChild){
                    if(this.listItem != obj.target){
                        this.listItem = obj.target; 
                    }
                }               
            }
            private function changeSelection(obj:Object):void{              
                if(obj.getRepeaterItem() == this.viewStack.selectedChild){
                    obj.setStyle("color","#000000");    
                }else{
                    obj.setStyle("color","#999999");
                }               
            }
        ]]>
    </fx:Script>

    <mx:Tile id="tiles" horizontalGap="20" verticalGap="0" y="210" direction="vertical">        
        <mx:Repeater id="masterList" dataProvider="{viewStack}">
            <mx:LinkButton 
                id="btn" 
                label="{masterList.currentItem.label}" 
                click="this.setSelection(event)"
                color="#999999"
                creationComplete="checkSelection(event);" />
        </mx:Repeater>
    </mx:Tile>

    <mx:ViewStack id="viewStack"  height="200" width="300" backgroundColor="#000000" >      
        <mx:VBox id="vb1" backgroundColor="#FF0000" label="Screen One"/>        
        <mx:VBox id="vb2" backgroundColor="#00FF00" label="Screen Two"/>        
        <mx:VBox id="vb3" backgroundColor="#0000FF" label="Screen Three"/>          
        <mx:VBox id="vb4" backgroundColor="#00FFFF" label="Screen Four"/>  
    </mx:ViewStack>

</s:Application>

Answer 1

在我看来，你的导航链接暴露了不同的内容，并且这些链接的颜色会根据所选择的链接而改变。假设是这样的话，它听起来非常像一个基于选项卡的导航模型。我的方法是使用spark TabBar，并使选项卡看起来像链接。这样你就可以去掉大部分代码，让标签皮肤根据它们的当前状态来处理颜色的改变。此外，您不需要任何更改视图堆栈的代码，因为TabBar将为您处理。希望这能有所帮助。