Flex3 快速入门：构建简单的用户界面 使用容器
|
使用容器 Container 类是所有 Flex 容器类的基本类。 扩展 Container 类的容器添加它们自己的功能以进行子组件布局。 在 Flex 应用程序的根部是称为 Application 容器的单一容器,它代表整个 Flash Player 绘图表面。此 Application 容器容纳所有其他容器和组件。 提示: 不同的容器支持不同的布局规则,包括 automatic 和 absolute 定位。关于这一点的详细信息,请参阅 Flex 组件的定位和布局。 使用布局容器? 使用导航器? 使用布局容器 使用布局容器可进行用户界面布局。下面的表格描述下面的示例使用的布局容器:
此外,该示例使用 Spacer 控件 (它不是一个容器) 来帮助进行界面的布局。 提示: Spacer 控件是用于在自动定位的容器内准确定位元素的一个不可见控件。 在此示例中,Spacer 控件是 ApplicationControlBar 容器中唯一基于百分比的组件。 Flex 调整 Spacer 控件的大小以占据容器中其他组件不需要的所有可用空间。 通过扩展 Spacer 控件,Flex 将 Button 控件推到该容器的右边缘。 示例 <?xml version="1.0" encoding="utf-8"?> <mx:Application? ??? xmlns:mx="http://www.adobe.com/2006/mxml"? ??? width="525" height="400" ??? viewSourceURL="src/LayoutContainers/index.html" > ??? <mx:ApplicationControlBar dock="true"> ??????? <mx:Label? ??????????? text="ApplicationControlBar"? ??????????? fontFamily="Verdana" fontWeight="bold" fontSize="12" ??????? /> ??????? <mx:Spacer width="100%"/> ??????? <mx:Button label="Log out"/> ??? </mx:ApplicationControlBar> ??? <mx:Panel? ??????????? <mx:Panel? 使用导航容器 导航器容器控制子级是其他容器的多个子级之间的用户移动或导航。 导航器容器的直接子级必须是容器,要么是布局容器,要么是导航器容器。 无法在导航器内直接嵌套控件；控件必须是导航器容器的子容器的子级。 下面的表格描述下面的示例使用的导航器容器:
Accordion |
Accordion 容器定义一个子面板序列,但一次仅显示一个面板。 若要导航容器,用户会单击与他们需要访问的子面板相对应的导航按钮。 使用 Accordion 容器,用户可以按任何顺序访问子面板以在表单中前后移动。 |
TabNavigator |
TabNavigator 容器创建和管理一组选项卡,使用它们可在其子级中间导航。 TabNavigator 容器的子级是其他容器。 TabNavigator 容器为每个子级创建一个选项卡。 当用户选中某个选项卡时,TabNavigator 容器会显示相关联的子级。 |
ViewStack |
|
ViewStack 导航器容器由彼此堆叠在一起的子容器的一个集合组成,一次只有一个容器是可见的或活动的。 ViewStack 容器不为用户定义切换当前活动容器的内置机制；您必须使用 LinkBar、TabBar、ButtonBar 或 ToggleButtonBar 控件或自己在 ActionScript 中构建逻辑让用户来更改当前活动的子级。 |
?
http://www.adobe.com/2006/mxml" layout="absolute"
??? width="550" height="550"
??? viewSourceURL="src/NavigationContainers/index.html"
>
??? <mx:Panel?
??????? layout="absolute"?
??????? left="10" top="10" right="10" bottom="10" title="Navigators"
??? >
??????? <mx:Accordion width="47.5%" height="200" top="36" left="10">
??????????? <mx:Canvas label="Navigation button 1" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 1"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="Navigation button 2" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 2"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="Navigation button 3" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 3"/>
??????????? </mx:Canvas>
??????? </mx:Accordion>
????????
??????? <mx:TabNavigator right="10" width="47.5%" height="200" y="36">
??????????? <mx:Canvas label="Tab 1" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 1"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="Tab 2" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 2"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="Tab 3" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 3"/>
??????????? </mx:Canvas>
??????? </mx:TabNavigator>
??????? <mx:ViewStack?
??????????? id="myViewStack"?
??????????? width="47.5%" height="200" right="10" bottom="10"
??????????? borderColor="#000000" borderStyle="solid"?
??????? >
??????????? <mx:Canvas label="View 1" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 1"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="View 2" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 2"/>
??????????? </mx:Canvas>
??????????? <mx:Canvas label="View 3" width="100%" height="100%">
??????????????? <mx:Label x="10" y="10" text="Contents 3"/>
??????????? </mx:Canvas>
??????? </mx:ViewStack>
????????
??????? <!-- Labels for the various controls -->
??????? <mx:Label x="10" y="252" text="ButtonBar"/>
??????? <mx:Label x="10" y="10" text="Accordion"/>
??????? <mx:Label x="262.5" y="10" text="TabNavigator"/>
??????? <mx:Label x="262.5" y="252" text="ViewStack"/>
??????? <mx:Label x="10" y="308" text="ToggleButtonBar"/>
??????? <mx:Label x="10" y="364" text="LinkBar"/>
??????? <mx:Label x="10" y="424" text="TabBar"/>
??????? <!--?
??????????? All these navigators use the same dataProvider,
??????????? namely,the myViewStack ViewStack instance.
??????????? Changing the selected view in one will affect
??????????? all the others also.??
??????? -->????????
??????? <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
??????? <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
??????? <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
??????? <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />
??? </mx:Panel> ???? </mx:Application>
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!