Apache flex Flex：为viewstack创建多列导航栏

我已经创建了一个Viewstack，使用一个平铺组件和重复的链接按钮，我能够使用Viewstack作为数据提供者进行多列导航。我的问题是这能做得更好吗？下面是我的代码，我想知道我是否在这个方法上花了很长的时间

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

此参数为.viewStack.length）{
此._listItem=listItem；
此.changeSelection（列表项）；
}
}
私有函数setSelection（obj:Object）：无效{
this.viewStack.selectedIndex=this.viewStack.getChildIndex（this.viewStack.getChildByName（obj.target.getRepeaterItem（）.name））；
this.listItem=obj.target；
}
私有函数checkSelection（obj:Object）：void{
if（obj.target.getRepeaterItem（）==this.viewStack.selectedChild）{
if（this.listItem！=obj.target）{
this.listItem=obj.target；
}
}               
}
私有函数changeSelection（obj:Object）：void{
if（obj.getRepeaterItem（）==this.viewStack.selectedChild）{
对象设置样式（“颜色”，“000000”）；
}否则{
对象设置样式（“颜色”，“#99999”）；
}               
}
]]>

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