flex Spark和Halo（mx）

最新推荐文章于 2024-03-31 09:45:38 发布

青峰祭坛

最新推荐文章于 2024-03-31 09:45:38 发布

阅读量865

点赞数

分类专栏： Flex 文章标签： flex 布局

本文链接：https://blog.csdn.net/u014470581/article/details/51235672

版权

Flex 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Halo组件也称MX组件是Flex3独有的组件（按钮、文字段、容器等），而Flex4中引入了新一代的组件Spark，Flex4同时支持Halo和Spark，但许多（并不是全部）Halo/mx

组件都有相应但更新的Spark组件

Spark容器的布局包括 BasicLayout :绝对布局，使用x和y坐标

HorizontalLayout: 组件在单行中依次横向排列。

VerticalLayout 组件在单列中依次纵向排列。

TileLayout 以类似网格的形式显示组件，创建尽可能多的行和列

1、绝对分布

x坐标从左边开始，y从顶部开始，分别向右和下移动

在绝对分布中不指定坐标会造成组件重叠，

<s:Group x="200" y="50">
</s:Group>

2、基本约束

组件的top、bottom、left和right属性用于控制与相关边的距离。

horizontalCenter和verticalCenter属性控制在相应的方向上与中心的距离

baseline 属性用于属于组件的上边与其父容器的距离。

3.增强约束

固定约束位置由绝对数字 (像素)来指定

相对约束位置根据相对于容器的百分比来确定

内容大小约束相对约束类似 <mx:ConstraintColumn> 和<mx:ConstraintRow> 用于实现约束辅助线所支持的属性

<?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: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"/>
		<s:Button label="Button2" left="col2:0"/>
	</mx:Canvas>
</s:Application>

其中第一约束列的宽度是200像素，第二约束列是50像素

每个按钮的left属性，使按钮基于相应的ConstraintColumn定位 col1：0 相对于第一列偏移0像素