flex 布局简介

1.学习布局

2.使用基于约束的布局

1.学习布局（容器的嵌套布局）：

UI(User Interface,用户界面)。

每一个应用程序都需要有ui，adobe flash builder 4的长处之一，就是让开发者更轻松的布置应用程序的ui。

flex应用程序的几乎所有定位组件都使用容器（container）和布局对象（layout Object）来完成。

容器：container

    如：Group、SkinnableContainer、Panel、Application、BorderContainer等

    用于包含和分组其他组件的特殊组件。容器最基本的能力就是支持换肤。但容器不知道他包含的子元素在屏幕上显示的位置和次序。

布局对象：Layout Object

    如：BasicLayout、HorizontalLayout、VerticalLayout、TileLayout

    用于确定组件在屏幕上显示的位置和顺序。

例子：

    

    如果不使用布局对象就会默认使用BasicLayout，那么除非为每个按钮指明了x和y坐标，否则都在坐标原点显示。

概念解析：

mxml中的类实例（class instance）与属性（property)的区别。

如：可以写成

   

        3

   

到底是类实例还是属性，看命名空间（这个例子中是s:）后面的第一个字母的大小写。如果是大写如Button中的B，说明引用了一个类实例。如果如label中的l小写，说明是在设置一个类的属性。

2.使用基于约束的布局

约束布局允许用户界面元素既有自由度，又能根据精确像素进行绝对定位，还可以设定约束支持用户调整窗口大小时自动适应组件。

实现原理：所有控件都是相对于父容器的边界进行定位的。这个父容器将被设置为BasicLayout，以支持绝对定位。除了某些特殊的容器（如From）外，对Group、SkinnableContainer以及Application和Panel，都可以使用BasicLayout。

具体操作：

    在设计模式下，选中组件，在属性面板中，滚动到最底部，在大小和位置部分的布局（Constraints）区域增加约束。如要始终在界面的最右边，则选中最右边的选框，填上相应的像素值。

    可选：选中Application，在属性面板中，删除最小宽度和最小高度的值。不删的话，浏览器窗口小于设定值时将可能看不到部分信息，而会出现滚动条。

实例：

    

表示：Checkout和View Cart两个按钮将始终在浏览器最右端，而Label将始终在浏览器右下角。