Flex: создание многостолбцовой панели навигации для стека просмотра - PullRequest
0 голосов
/ 05 октября 2010

Я создал Viewstack, используя компонент Tile и повторяя LinkButton. Мне удалось сделать многостолбцовую навигацию с помощью 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>

1 Ответ

0 голосов
/ 05 октября 2010

Похоже, у вас есть навигационные ссылки, которые отличаются друг от друга, и эти ссылки меняют цвет в зависимости от того, какая из них выбрана.Если предположить, что это так, то это звучит очень похоже на модель навигации на основе вкладок.Мой подход состоит в том, чтобы использовать Spark TabBar и делать скины вкладок, чтобы они выглядели как ссылки.Таким образом, вы можете избавиться от большей части своего кода и позволить оболочке вкладки обрабатывать изменение цветов в зависимости от их текущего состояния.Кроме того, вам не понадобится какой-либо код, который вы используете для изменения стека представлений, так как TabBar будет обрабатывать это для вас.Надеюсь, это поможет.

...