flex day 7 容器与布局

<s:Group> 是可视元素的基类。

<s:layout> 负责容器中可视元素的测量和布局

<s:VerticalLayout>按垂直顺序从上向下排列布局元素

<s:HorizontalLayout>按水平顺序从左到右排列布局元素

<s:TileLayout>在单元格大小相等的列和行中排列布局元素。TileLayout 类使用许多属性来控制列和行的方向、计数、大小、间隙和两端对齐以及单元格内的元素对齐。

 

<s:HGroup>是使用 HorizontalLayout 类的 Group 容器的一个实例

<s:VGroup>是使用 VerticalLayout 类的 Group 容器的一个实例

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			import spark.layouts.BasicLayout;
			import spark.layouts.HorizontalLayout;
			import spark.layouts.TileLayout;
			import spark.layouts.VerticalLayout;
			private var _basicLayout:BasicLayout = new BasicLayout();
			private var _verticalLayout:VerticalLayout =
				new VerticalLayout();
			private var _horizontalLayout:HorizontalLayout = 
				new HorizontalLayout();
			private var _tileLayout:TileLayout = new TileLayout();
			[Bindable]
			private var _layouts:ArrayCollection = new ArrayCollection([
				_basicLayout,_verticalLayout,_horizontalLayout,_tileLayout]);
		]]>
	</fx:Script>
	<s:Panel x="15" y="15" width="240" height="140">
		<s:Scroller width="100%" height="100%">
			<s:VGroup>
				<s:DropDownList id="layoutDDL" dataProvider="{_layouts}"
							    width="200" selectedIndex="0"/>
				<s:Group layout="{layoutDDL.selectedItem}">
					<s:Button label="a"/>
					<s:Button label="b"/>
					<s:Button label="c"/>
					<s:Button label="d"/>
				</s:Group>
			</s:VGroup>
		</s:Scroller>
	</s:Panel>