flex中ViewStack利用按钮做导航

ViewStack具有常用的三个属性:

1,numChildren包含子容器的个数

2,selectedChild当前选择的子容器

3,selectedindex当前选择的子容器的索引

在导航器中除了使用连接条控件为容器导航,还可以使用不同的按钮为容器导航。在利用按钮导航时需要给每个容器设定一个按钮,然后为按钮定义点击事件。

下面的例子说明,再单击按钮时,直接为按钮的click事件定义方法。在其中为selectedChild或者selectedIndex属性赋值,定义按钮后显示的子容器。

<?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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">
<mx:VBoxheight="427"width="328"backgroundColor="#ffffff">
<mx:HBoxwidth="100%"borderStyle="solid">
<mx:Buttonid="b1"label="栏目1"click="myView.selectedChild=c1;">
</mx:Button>
<mx:Buttonid="b2"label="栏目2"click="myView.selectedChild=c2;">
</mx:Button>
<mx:Buttonid="b3"label="栏目3"click="myView.selectedChild=c3;">
</mx:Button>
</mx:HBox>
<mx:ViewStackheight="100%"width="100%"borderStyle="solid"id="myView">
<mx:HBoxheight="100%"width="100%"id="c1"label="栏目1">
<mx:Labeltext="这是栏目1">
</mx:Label>
</mx:HBox>
<mx:Canvasid="c2"height="100%"width="100%"label="栏目2">
<mx:Labeltext="现在是栏目2">
</mx:Label>
</mx:Canvas>
<mx:VBoxid="c3"height="100%"width="100%"label="栏目3">
<mx:Labeltext="现在是栏目3">

</mx:Label>
</mx:VBox>

</mx:ViewStack>
</mx:VBox>
<fx:Declarations>
<!--将非可视元素(例如服务、值对象)放在此处-->
</fx:Declarations>
</s:Application>

你可能感兴趣的:(Flex,做导航,ViewStack利用按钮)