??????????????????????????????????????????????????????????????????????????????????導航
導航的作用是在不同的子組件之間相互切換的時候，能夠保證順利的操作運行和導向。

ViewStack導航、Tab導航、Accordion

一、 ViewStack導航設計
ViewStack是一種可以靈活定義的導航，其各個子組件可以是任意形式的。同時，ViewStack導航沒有為用戶提供可以切換當前活動容器的導航組件，需要自行定義。

1.1 創建ViewStack容器
在Flex中，已經預置了ViewStack導航容器。通過標簽<mx:ViewStack>可以創建一個ViewStack導航容器。切換當前活動容器的導航組件可以通過使用諸如LinkBar、TabBar、ButtonBar、或者ToggleButtonBar組件完成。

main.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:VBox><mx:HBox><mx:Button label="Flash" fontSize="12" click="vsInfo.selectedChild=infoFlash;"/><mx:Button label="Flex" fontSize="12" click="vsInfo.selectedChild=infoFlex;"/><mx:Button label="Adobe AIR" fontSize="12" click="vsInfo.selectedChild=infoAIR;"/></mx:HBox><mx:ViewStack id="vsInfo" width="300" height="500" fontSize="12"><lalo:FlashInfo id="infoFlash"/><lalo:FlexInfo id="infoFlex"/><lalo:AIRInfo id="infoAIR"/></mx:ViewStack></mx:VBox> </mx:Application>

AIRInfo(FlexInfo，FlashInfo類似)

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="300" width="500"><mx:Text width="100%" height="100%"><mx:text><![CDATA[ Adobe? AIR? 運行時使開發人員能夠使用已經過驗證的 Web 技術來構建可部署到桌面并跨操作系統運行的豐富互聯網應用程序。 Adobe AIR 提供一種激動人心的新方式, 可借助創新的、品牌的桌面應用程序吸引客戶, 而無需對現有技術、人員或流程進行更改。]]></mx:text></mx:Text> </mx:Canvas>

AIRInfo

1.2 實現不同子容器之間的傳值
在ViewStack導航中，最常用的功能就是當切換每個子容器的時候，能夠互相的傳送參數。傳送參數的一般的做法是可以創建一個全局的靜態類或者靜態變量，把參數值暫時存放起來。

main.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:ViewStack id="vsPass" fontSize="12"><lalo:PassValue id="passValue"/><lalo:ViewValue id="viewValue"/></mx:ViewStack> </mx:Application>

PassValue.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script><![CDATA[import mx.controls.Alert;import mx.containers.ViewStack;private function btnPass_click():void{var modelLocator:ViewModelLocator = ViewModelLocator.getInstance();modelLocator.param = txtParam.text;(ViewStack)(this.parent).selectedChild = (ViewStack)(this.parent).getChildByName("viewValue");}]]></mx:Script><mx:Form fontSize="12"><mx:FormItem label="傳遞的參數值："><mx:TextInput id="txtParam"/></mx:FormItem><mx:FormItem><mx:Button id="btnPass" label="提交" click="btnPass_click()"/></mx:FormItem></mx:Form> </mx:Canvas>

ViewValue.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"creationComplete="initApp()"><mx:Script><![CDATA[[Bindable]private var modelLocator:ViewModelLocator = ViewModelLocator.getInstance();private function initApp():void{lbParam.text = "傳遞過來的參數值：" + modelLocator.param;}]]></mx:Script><mx:Label id="lbParam" fontSize="14" x="40" y="47"/> </mx:Canvas>

ViewModelLocator.as

package lalo { ?public class ViewModelLocator ?{ ??private static var instance:ViewModelLocator; ?? ??public function ViewModelLocator() ??{ ???// 構造函數 ??}

??public static function getInstance() : ViewModelLocator ??{ ???if (instance == null) ???{ ????instance = new ViewModelLocator(); ???} ??? ???return instance; ??}

??// 定義變量 ??public var param : String; ?} }

?

二、 標簽導航設計
標簽導航又稱選項卡導航，這種導航是通過管理若干個標簽頁，來切換子容器的。標簽導航容器是ViewStack導航容器的子類，集成了ViewStack的諸多功能。

2.1 使用TabNavigator導航容器
在Flex中，提供了TabNavigator標簽導航容器。使用標簽<mx:TabNavigator>可以創建一個TabNavigator導航容器。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:TabNavigator borderStyle="solid" fontSize="12"><lalo:FlashInfo label="Flash"/><lalo:FlexInfo label="Flex"/><lalo:AIRInfo label="AIR"/></mx:TabNavigator> </mx:Application>

2.2 動態添加TAB標簽
在TabNavigator導航容器的應用中，動態添加TAB標簽是最常用的了。動態添加TAB標簽是根據用戶的操作，添加指定數量的TAB標簽的數量。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script><![CDATA[import mx.controls.Label;import mx.containers.Canvas;// 刪除按鈕單擊事件private function btnDelTab_click():void{// 移除TabNavigator組件中指定的標簽頁myTab.removeChild((DisplayObject)(myTab.selectedChild));}// 添加按鈕單擊事件private function btnAddTab_click():void{// 添加TabNavigator組件中指定的標簽頁addTab(txtTitle.text, txtContent.htmlText);}// 添加標簽頁private function addTab(tabLabel:String, tabText:String):void{// 創建Canvas對象var canvas:Canvas = new Canvas();// 設置Canvas對象的標簽屬性canvas.label = tabLabel;// 創建Label對象var label:Label = new Label();// 設置Label對象的超文本內容label.htmlText = tabText;// 添加Label對象到canvas中canvas.addChild(label);// 添加canvas對象到TabNavigator組件中myTab.addChild(canvas);}]]></mx:Script><mx:HBox fontSize="12"><mx:Form><mx:FormItem label="題目："><mx:TextInput id="txtTitle"/></mx:FormItem><mx:FormItem label="內容："><mx:TextArea height="200" id="txtContent"/></mx:FormItem><mx:Form><mx:HBox><mx:Button label="添加" click="btnAddTab_click()"/><mx:Button label="刪除" click="btnDelTab_click()"/></mx:HBox></mx:Form></mx:Form><mx:TabNavigator width="300" height="300" id="myTab"/></mx:HBox> </mx:Application>

三、 折疊導航設計
表單是很多應用中最基本的組件之一。當遇到多個關聯表單，使用者可能會遇到操作上的困難。當表單很多，并且不能集成在同一個頁面時，用戶需要在多個表單之間前后移動切換。折疊導航設計可以有效的解決這個問題。在Flex中，使用標簽<mx:Accordion>可以創建一個Accordion導航容器。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:lalo="lalo.*"><mx:Accordion><lalo:FlashInfo label="Flash"/><lalo:FlexInfo label="Flex"/><lalo:AIRInfo label="AIR"/></mx:Accordion> </mx:Application>

?

?

總結

以上是生活随笔為你收集整理的flex----导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。