Flex容器

   Flex提供的容器，主要实现容纳其他的控件或者是容器，以达到美化页面和布局的目的，这种容器，很类似于java所提供的布局管理器，实现对应用程序的布局。

  

  在Flex中，所提供的容器很多，每个容器都有相应的使用规则,常见的有两种，布局容器和导航容器

 

 1 布局容器

 

   Hbox: 其内的每一个控件或容器只能按照水平的顺序排列

  

   Vbox: 其内的每一个控件或容器只能按照垂直的顺序排列

   

   panel :是一个具有标题和边框等的容器，常常用来容纳其他的容器

  

  HDividedBox HDividedBox容器对子组件进行水平布局, 除了在子级之间插入一个可调整的分割线之外, 它与 HBox 容器很相似。 VDividedBox 容器对子组件进行垂直布局, 而且也在子级之间插入一个可调整的分割线。

  Tile Tile容器以多行或多列的形式排列其子级。

  

   Form Form容器以标准的表单格式排列其子级。

  

     ApplicationControlBar ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。

  

 ControlBar ControlBar 容器将控件置于 Panel 或 TitleWindow 容器的下边缘。

 

综合例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="480" height="320">
<mx:ApplicationControlBar dock="true">
<mx:Label text="ApplicationControlBar" fontWeight="bold" fontSize="12"/>
<mx:Label text="soking's desk 20061127"/>
<mx:Spacer width="100%"/>
<mx:Button label=" Log out"/>
</mx:ApplicationControlBar>

<mx:Panel width="100%" layout="absolute" title="Panel" height="100%">

<mx:HDividedBox width="100%" height="100%">

<mx:Panel width="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" height="100%">
<mx:Label text="Panel without header" fontWeight="bold" x="0" y="0"/>
<mx:Form width="100%" x="134" y="0">
<mx:FormHeading label="First Form"/>
<mx:FormItem label="Name:">
<mx:TextInput width="80"/>
</mx:FormItem>
<mx:FormItem label="Email:">
<mx:TextInput width="80"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>

<mx:Panel width="100%" headerHeight="0" borderStyle="solid" shadowDistance="0" height="100%">
<mx:Label text="Panel without header" fontWeight="bold"/>
<mx:Form width="100%">
<mx:FormHeading label="First Form"/>
<mx:FormItem label="Name:">
<mx:TextInput width="80"/>
</mx:FormItem>
<mx:FormItem label="PWD:">
<mx:TextInput width="80" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>

</mx:HDividedBox>

<mx:ControlBar width="100%" >
<mx:Label text="ControlBar in panel" fontWeight="bold"/>
<mx:Spacer width="100%"/>
<mx:Button label="Pre"/>
<mx:Button label="Finish"/>
</mx:ControlBar>

</mx:Panel>
</mx:Application>

 

 

  2.当航容器

  导航容器的主要作用是用来在多个容器之间进行换。在使用的过程中，需要我们注意的是，导航器容器的直接子级必须是容器, 要么是布局容器, 要么是导航器容器。 无法在导航器内直接嵌套控件；控件必须是导航器容器的子容器的子级。

 

  Accordion Accordion 容器定义一个子面板序列, 但一次仅显示一个面板。 若要导航容器, 用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器, 用户可以按任何顺序访问子面板以在表单中前后移动。

   TabNavigator TabNavigator 容器创建和管理一组选项卡, 使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时, TabNavigator 容器会显示相关联的子级。

 

 ViewStack ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成, 一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。

 

综合例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="480" height="455">
<mx:Panel x="10" y="10" width="460" height="435" layout="absolute" title="Navigators">

<mx:Accordion x="10" y="30" width="200" height="120">
<mx:Canvas label="Navigation button 1" width="100%" height="100%">
<mx:Text x="10" y="10" text="The first Navigation Button!"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 2" width="100%" height="100%">
<mx:TextInput text="soking's desk" width="120" x="10" y="10"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 3" width="100%" height="100%">
<mx:Text x="10" y="10" text="Soking's desk"/>
</mx:Canvas>
</mx:Accordion>

<mx:TabNavigator x="230" y="30" width="200" height="120">
<mx:Canvas label="Tab 1" width="100%" height="100%">
<mx:Text x="10" y="10" text="The first TabNavigator!"/>
</mx:Canvas>
<mx:Canvas label="Tab 2" width="100%" height="100%">
<mx:TextInput text="soking's desk" width="120" x="10" y="10"/>
</mx:Canvas>
<mx:Canvas label="Tab 3" width="100%" height="100%">
<mx:Text x="10" y="10" text="Soking's desk"/>
</mx:Canvas>
</mx:TabNavigator>

<mx:ViewStack x="230" y="182" id="viewstack1" width="200" height="200" borderStyle="solid">
<mx:Canvas label="Red" width="100%" height="100%">
<mx:Label text="Red Red Red Red" color="#ff0000"/>
</mx:Canvas>
<mx:Canvas label="Purple" width="100%" height="100%">
<mx:Label text="Purple Purple Purple Purple" color="#9900cc"/>
</mx:Canvas>
<mx:Canvas label="Green" width="100%" height="100%">
<mx:Label text="Green Green Green Green" color="#009900"/>
</mx:Canvas>
</mx:ViewStack>

<mx:ButtonBar x="10" y="182" dataProvider="viewstack1">
</mx:ButtonBar>
<mx:TabBar x="6" y="360" dataProvider="viewstack1">
</mx:TabBar>
<mx:ToggleButtonBar x="10" y="242" dataProvider="viewstack1">
</mx:ToggleButtonBar>
<mx:LinkBar x="10" y="301" dataProvider="viewstack1">
</mx:LinkBar>

<mx:Label x="10" y="160" text="ButtonBar" color="#0000ff"/>
<mx:Label x="230" y="10" text="TabNavigator" color="#0000ff"/>
<mx:Label x="230" y="160" color="#0000ff" text="ViewStack"/>
<mx:Label x="10" y="10" text="Accordion" color="#0000ff"/>
<mx:Label x="10" y="220" text="ToggleButtonBar" color="#0000ff"/>
<mx:Label x="10" y="280" text="LinkBar" color="#0000ff"/>
<mx:Label x="10" y="340" text="TabBar" color="#0000ff"/>

</mx:Panel>

</mx:Application>

 

以上是学习过程中的一些总结，欢迎大家指正