布局和容器原

LeoXu

发布于 2018-08-15 14:47:14

1.3K0

发布于 2018-08-15 14:47:14

文章被收录于专栏：LeoXu的博客 LeoXu的博客LeoXu的博客

Spark和Halo(MX)

Halo(MX)是Flex3独有的组件；
Spark是Flex4引入的新一代组件；
Flex4同时支持 Spark和Halo(MX);
Spark容器允许改变布局算法；
Halo(MX)组件则内置了不去算法，所以如果在Halo(MX)中，如果想使用另外一种布局方法，就必需修改所有容器的类型；

布局管理器

布局管理器通过3个阶段处理每个可视组件的位置和大小：

提交 - 查看每个组件的所有属性设置，此阶段将执行每个组件的commitProperties()方法，为布局管理器提供与组件位置和大小相关的属性。
测量 - 从内到外计算所有组件的默认大小，此过程涉及对所有内部子对象的宽度、边框厚度、内边距和子对象间的间距进行求和。布局管理器运行了每个对象的mesureSizes()方法。
布局 - 从外到内调用每个组件的updateDisplayList()方法，通过设置每个组件的位置和大小来对组件进行布局，使组件刷新显示的内容。

Spark容器支持使用的容器：

BasicLayout - 绝对布局
HorizontalLayout - 横向排列
VerticalLayout - 纵向排列
TileLayout - 网格排列

绝对布局

Application容器默认使用绝对布局；
使用绝对布局需要指定或者默认指定BasicLayout类；
绝对布局使用x和y属性；
可以使用绝对布局的重叠制造一些特效；
可以使用绝对布局来隐藏一些组件，在某些条件下再显示出来。

基于约束的布局

此布局不使用相对于容器左上角的x和y属性来定位组件，而是相对于容器的四个边或者容器的中心点来定位组件；
此布局的优点在于即使用户调整了窗口大小，组件同容器之间的相对位置关系仍然可以保持不变；
如果使用绝对布局来实现同样的效果，就需要自己动手编写代码执行相应的计算，并在窗口发生变化后及时更新x和y属性；

基本约束：

top、bottom、left、right属性可用于控制组件与相关边的距离；
horizontalCenter和verticalCenter属性可用于控制组件在相应方向上与中心的距离；
baseline属性用于设置组件的上边与父容器的距离

增强的约束：

在基本约束的基础上更进一步，扩展了对定位的控制能力，允许开发人员在水平和垂直方向上任意创建隐藏的辅助线，然后对照辅助线定位组件；
辅助线分为约束行和约束列；
约束行与约束列可以按照下列3中方法放到容器中：

固定约束 - 位置由绝对值来指定；
相对约束 - 位置根据容器大小和百分比来确定；
内容大小约束 - 位置是相对于内容大小而确定的。

使用<mx:ConstraintColumn>和<mx:ConstraintRow>；
只能基于Halo(MX)的Canvas容器使用这种模式；
Spark容器的组件都不支持这种增强约束，不过当放到使用这类约束的MX容器中时，Spark组件在约束列和约束行下的效果和预期一致；
示例：

两行固定分割

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" width="200"/>			
			<mx:ConstraintColumn id="col2" width="50"/>			
		</mx:constraintColumns>
		<s:Button label="Button1" left="col1:0"/> <!-- 将col1用作ConstraintColumn，向左偏移0 -->
		<s:Button label="Button2" left="col2:0"/> <!-- 将col2用作ConstraintColumn，向左偏移0 -->
	</mx:Canvas>
	
</s:Application>

带有左右约束的两列固定分割

<s:Button label="Button1" left="col1:0" right="col1:0"/>
<s:Button label="Button2" left="col2:0" right="col2:0"/>

带有上下约束的两行固定分割

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50%"/>			
			<mx:ConstraintRow id="row2" height="100"/>			
		</mx:constraintRows>
		<s:Button label="Button1" top="row1:0" bottom="row1:0"/>
		<s:Button label="Button2" top="row2:0" bottom="row2:0"/>
	</mx:Canvas>
	
</s:Application>

有偏移的两行加两列分割

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" width="100"/>
		</mx:constraintColumns>
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50"/>			
			<mx:ConstraintRow id="row2" height="50"/>			
		</mx:constraintRows>
		<s:Button label="Button1" left="col1:0" right="col1:0" top="row1:0" bottom="row1:0"/>
		<s:Button label="Button2" left="col1:10" right="col1:10" top="row2:0" bottom="row2:0"/>
	</mx:Canvas>
	
</s:Application>

基于内容大小的约束

该约束会在不指定约束的height和width属性值时自动启动；
该约束下，所有项目会缩放至列宽或行高，列宽和行高则由容器的最大项目决定。

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" />
			<mx:ConstraintColumn id="col2" />
		</mx:constraintColumns>
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50"/>			
			<mx:ConstraintRow id="row2" height="30"/>			
		</mx:constraintRows>
		<s:Button label="Button1" left="col1:0" top="row1:0" width="200"/>
		<s:Button label="Button2" left="col1:0" top="row2:0"/>
		<s:Button label="Button3" left="col2:0"/>
	</mx:Canvas>
	
</s:Application>

自动布局

HorizontalLayout和HorizontalLayout

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>		
	</s:layout>
	<s:Group>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:Button label="BTN1"/>
		<s:Button label="BTN2"/>
	</s:Group>
	<s:Group>
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Button label="BTN1"/>
		<s:Button label="BTN2"/>
	</s:Group>
</s:Application>

TileLayout

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:TileLayout orientation="columns" requestedRowCount="2" />		
	</s:layout>
		
	<s:Button label="btn1"/>
	<s:Button label="btn2"/>
	<s:Button label="btn3"/>
</s:Application>

<mx:Spacer/>

<?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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:HorizontalLayout />		
	</s:layout>
		
	<s:Button label="btn1"/>
	<mx:Spacer width="50%"/>
	<s:Button label="btn2"/>
	<mx:Spacer width="50%"/>
	<s:Button label="btn3"/>
</s:Application>

组件的大小

固定大小：设置固定值，单位为像素；
可变大小：设置百分比，实现相对于所在容器的大小缩放；

容器

Spark中新添加的容器：

Application - Flex应用程序的主容器，也是初始容器

preloader属性，显示启动Flex程序时看到的进度条，默认打开
Application是应用程序的顶级对象，因此可以用来装载全局变量和函数，从而能够在程序的任何地方访问他们
一个应用程序只能有一个<s:Application />容器

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var hello:String = "hello!!!";
		]]>
	</fx:Script>
	<local:CustomComponent />
</s:Application>

CustomComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.core.FlexGlobals;
		]]>
	</fx:Script>
	<s:Button label="{FlexGlobals.topLevelApplication.hello}"/>
</s:Group>

Group

需要与布局类结合起来使用；
为减少代码量，还有<s:Hgroup/>和<s:Vgroup/>可供使用。

SkinnableContainer - 支持换肤功能的Group

需要单独的皮肤文件，

CoolSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    
    <!--- 定义支持状态 -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
	<!--- 背景中使用的矩形 -->
    <s:Rect height="100%" width="100%">
        <s:fill>
			<s:LinearGradient>
				<s:entries>
					<s:GradientEntry color="#92A1B9"/>
				</s:entries>
			</s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <s:Group id="contentGroup" left="5" right="5" top="5" bottom="5" >
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>

</s:SparkSkin>

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:SkinnableContainer skinClass="CoolSkin"><!--- 指定皮肤 -->
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:Button label="button 1"/>
		<s:Button label="button 2"/>
	</s:SkinnableContainer>
</s:Application>

Panel - 基于 SkinnableContainer，是其子类，多了标题栏和一个框架

经常用作整个应用程序的顶级容器，支持嵌套
优势在于，其在窗口上添加了一个标题栏和一个状态栏，默认还会绘制出子对象的边框

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="My Panel">
		<s:HGroup top="5" bottom="5" left="5" right="5">
			<s:Button label="button1"/>
			<s:Button label="button2"/>
		</s:HGroup>
	</s:Panel>
</s:Application>

DataGroup和SkinnableDataContainer

DataGroup 用于数据集合（如数组），使用项渲染器渲染这些数据，从而能够自定义显示；
项渲染器也是一个组件；
SkinnableDataContainer 是 DataGroup 的可换肤版本；
在使用这两个组件时，需要把数据发送给它们的dataProvider属性；
提供的数据可以是集合形式的，如ArrayCollection，还可以包含任何元素，如字符串，按钮或图形；
可以使用的两个项渲染器：

spark.skins.spark.DefaultItemRenderer 简单文本；
spark.skins.spark.DefaultComplexItemRenderer Group容器内显示，只有在数据中包含可是组件，如按钮、图像时，渲染才有效

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			public var $data:ArrayCollection = new ArrayCollection(["item1", "item2", "item3"]);
		]]>
	</fx:Script>
	<s:DataGroup dataProvider="{$data}"
				 itemRenderer="spark.skins.spark.DefaultItemRenderer">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:DataGroup>
</s:Application>

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:ArrayCollection id="$data">
			<s:Button label="button 1"/>
			<s:Button label="button 2"/>
			<s:Button label="button 3"/>
		</s:ArrayCollection>
	</fx:Declarations>
	<s:DataGroup dataProvider="{$data}"
				 itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
		<s:layout>
			<s:HorizontalLayout/>			
		</s:layout>
	</s:DataGroup>
</s:Application>

Canvas容器

基于Halo(MX),轻量级，功能不强大；
一般用于使用了增强约束的场景。

ApplicationControlBar

MX组件，类似还有ControlBar，但是Spark Panel的属性controlBarContent和controlBarLayout可以实现与ContralBar类似的效果；
此容器给应用程序添加一个控制栏；
需要与Application容器配合使用。

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="My Panel">
		<s:HGroup top="5" bottom="5" left="5" right="5">
			<s:Button label="button1"/>
			<s:Button label="button2"/>
		</s:HGroup>
	</s:Panel>
</s:Application>

DivedeBox、HDivedeBox 和 VDivedeBox

Halo(MX)组件，允许用户控制大小的调整，类似于HTML中的frame；
用户通过鼠标拖动分隔条来调整窗口大小，支持嵌套使用；

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="Report Dashboard" verticalCenter="0" horizontalCenter="0">
		<mx:DividedBox direction="horizontal" width="100%">
			<s:VGroup height="100%">
				<mx:Text text="Catogries" fontWeight="bold"/>
				<s:Button label="Finance" width="100%"/>
				<s:Button label="Operations" width="100%"/>
			</s:VGroup>
			<mx:VDividedBox width="50%" height="100%">
				<s:VGroup width="100%">
					<mx:Text text="Finance Reports" fontWeight="bold"/>
					<mx:Text text="2008 Q1 sales" />
					<mx:Text text="2008 Q2 sales" />
				</s:VGroup>
				<s:VGroup width="100%">
					<mx:Text text="Finance Reports2" fontWeight="bold"/>
					<mx:Text text="2008 Q1 sales" />
					<mx:Text text="2008 Q2 sales" />
				</s:VGroup>
			</mx:VDividedBox>
		</mx:DividedBox>
	</s:Panel>
</s:Application>

Form容器

支持在每个表单输入字段旁添加标签(label);
纯粹用作布局，不一定包含表单项；
Form容器包含三个组件：

Form主容器
FormHeader组件，可选，为表单中相应分区添加标题
FormItem 用于将文本与每个表单输入字段关联

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Form>
		<mx:FormHeading label="Contact Info"/>
		<mx:FormItem label="First Name">
			<s:TextInput/>
		</mx:FormItem>
		<mx:FormItem label="Last Name">
			<s:TextInput/>
		</mx:FormItem>
	</mx:Form>
</s:Application>

Grid容器

包含Grid，GridRow和GridItem标签

<?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"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Grid>
		<mx:GridRow>
			<mx:GridItem>
				<s:Button label="Rewind"/>
			</mx:GridItem>
			<mx:GridItem>
				<s:Button label="Play"/>
			</mx:GridItem>
			<mx:GridItem>
				<s:Button label="Forward"/>
			</mx:GridItem>
		</mx:GridRow>
		<mx:GridRow>
			<mx:GridItem colSpan="3">
				<s:Button label="STOP" width="100%"/>
			</mx:GridItem>
		</mx:GridRow>
	</mx:Grid>
</s:Application>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014/08/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

容器

spark

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

容器

spark

编程算法

登录后参与评论

0 条评论

热度

布局和容器原

布局和容器原

Spark和Halo(MX)

布局管理器

Spark容器支持使用的容器：

绝对布局

基于约束的布局

基本约束：

增强的约束：

自动布局

HorizontalLayout和HorizontalLayout

TileLayout

<mx:Spacer/>

组件的大小

容器

Spark中新添加的容器：

Application - Flex应用程序的主容器，也是初始容器

Group

SkinnableContainer - 支持换肤功能的Group

Panel - 基于 SkinnableContainer，是其子类，多了标题栏和一个框架

Canvas容器

ApplicationControlBar

DivedeBox、HDivedeBox 和 VDivedeBox

Form容器

Grid容器

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

布局和容器 原

布局和容器 原

Spark和Halo(MX)

布局管理器

Spark容器支持使用的容器：

绝对布局

基于约束的布局

基本约束：

增强的约束：

自动布局

HorizontalLayout和HorizontalLayout

TileLayout

<mx:Spacer/>

组件的大小

容器

Spark中新添加的容器：

Application - Flex应用程序的主容器，也是初始容器

Group

SkinnableContainer - 支持换肤功能的Group

Panel - 基于 SkinnableContainer，是其子类，多了标题栏和一个框架

Canvas容器

ApplicationControlBar

DivedeBox、HDivedeBox 和 VDivedeBox

Form容器

Grid容器

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

布局和容器原

布局和容器原