flex4 布局

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns: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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel width="400" height="400" title="Panle" symbolColor="#BA27A3">   
		<s:layout>   
			<s:VerticalLayout horizontalAlign="left"/> 
			<!--<s:HorizontalLayout paddingTop="60"/>-->
		</s:layout>   
		<s:VGroup width="203" height="177" contentBackgroundColor="#931B1B">   
			<s:Button width="200" label="tesing1" />   
			<s:Button width="200" label="tesing2" />   
			<s:Button width="200" label="tesing3" />   
		</s:VGroup>   
		<s:VGroup width="203" height="177" contentBackgroundColor="#1920A6" contentBackgroundAlpha="0.0" chromeColor="#620C0C" focusColor="#1B7AD2">   
			<s:Button width="200" label="tesing1" />   
			<s:Button width="200" label="tesing2" />   
			<s:Button width="200" label="tesing3" />   
		</s:VGroup>   
		<s:HGroup width="200" height="200">
			<s:Button width="200" label="tesing1" />   
			<s:Button width="200" label="tesing2" />   
			<s:Button width="200" label="tesing3" /> 
			
		</s:HGroup>
		<s:Scroller width="100%" height="100%"> 
			<s:VGroup width="100%" height="100%">   
				<s:Button width="200" label="tesing1" />   
				<s:Button width="200" label="tesing2" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing3" />   
				<s:Button width="200" label="tesing19" />   
				<s:Button width="200" label="tesing20" />   
			</s:VGroup>   
		</s:Scroller>  

	</s:Panel>   
	
</s:Application>

 

1. 1.四种布局概述      
2.   在Flex SDK 4(Gumbo)的spark组件库里面增加了一个page：spark.layouts。      
3.   其中包括了比较重要的四个布局class，分别是：BasicLayout、HorizontalLayout、TileLayout、VerticalLayout      
4.      
5. 1、BasicLayout：（默认属性，当不指定定位后，则是绝对定位布局）      
6.   这是spark组件默认Flex SDK 3的布局方式，即绝对定位布局。      
7.    在Flex SDK 3 里面对应的是：layout="absolute"     
8.      
9. 2、HorizontalLayout：      
10.   这是spark组件库里面的水平布局方式。      
11.   在里面对应的是：layout="horizontal"     
12.      
13. 3、VerticalLayout：      
14.    这是spark组件库里面的竖直布局方式。      
15.    在Flex SDK 3 里面对应的是：layout="vertical"     
16.     
17. 4、TileLayout：      
18.   这是spark组件库新增的布局方式，即格子布局方式。      
19.   TileLayout布局方式可以说是HorizontalLayout和VerticalLayout结合的方式。      
20.      
21. 还有一点是需要注意的：      
22.   paddingLeft、paddingRight、paddingTop、paddingBottom      
23.   这四个属性已经转移到了HorizontalLayout、VerticalLayout里面。这点也与Flex SDK 3有些区别。也就是说，在spark组件中的容器，已经不具备paddingLeft、paddingRight、paddingTop、 paddingBottom属性了。   
24. 2.spark组件中比较常见的容器      
25. 1、Group：      
26.   相当于Canvas、默认是BasicLayout方式）      
27. 2、HGroup：      
28.   相当于HBox，因此只有一种布局方式：HorizontalLayout布局。      
29. 3、VGroup：      
30.   相当于VBox，因此只有一种布局方式：VerticalLayout布局。      
31. 4、Panel：      
32.  与Flex SDK 3的Panel在作用上是一样的，默认布局方式是BasicLayout布局。      
33.     
34. 3.可视区域（Scroller）      
35.   或者又叫滚动显示组件区域。      
36.   这是Flex SDK 4(Gumbo) spark新增的组件，就是用于当Scroller里面的内容边界超出Scroller后，以便显示滚动条。