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后,以便显示滚动条。     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值