Flex中的布局
http://varnow.org/?p=131
首先说说Flex中的元素分类,从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:
组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button、Checkbox、Datagrid、List等。
容器 - 是指那类用来放置其他元素的元素,容器往往不具有特定的交互功能,主要的功能就是容纳元素。容器再细分又可以分为布局(Layout)容器和导航(Navigator)容器,其中布局容器的功能就是用来布局界面元素的,例如Application、Panel等;导航容器主要用于进行功能性的导航,进行界面切换,例如TabNavigator等。
FLex中的布局即指布局容器的布局方式,按布局特点我这里将布局分了两大类:基础布局和特殊布局。
基础布局 - 基于layout属性和constraint-based的布局,例如Application、Panel、Canvas等容器。
特殊布局 - 基于容器的功能,不同的容器具有非常特征明显的布局方式,例如Form、Grid、HDividedBox等。
基础布局
1. layout属性
通过容器的layout属性来设置布局方式,主要包括以下几种:
(1)vertical - 从上至下依次将子元素垂直放置在单一一列中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(2)horizontal - 从左至右依次将子元素水平放置在单一一行中,而水平对齐方式可以通过horizontalAlign来设置,垂直对齐方式可以通过verticalAlign来设置。
(3)absolute - 通过设置每个子元素的x/y属性来定位每个子元素,而容器不会自动调整子组件的位置。
2. constraint-based
在容器的layout属性设置为absolute的情况下(Canvas除外,因为Canvas只有absoulte一种布局方式,因此Canvas默认如此),可以使用constraint-based布局。这种布局方式是通过子元素的4条侧边以及2条中心线与容器相应侧边和中心线的偏移量来决定子元素的定位的。相应的属性设置如下:
(1)left - 子元素左边离容器左侧的距离
(2)right - 子元素右边离容器右侧的距离
(3)top - 子元素顶边离容器顶部的距离
(4)bottom - 子元素底边离容器底部的距离
(5)horizontalCenter - 子元素水平中心线相对于容器水平中心线的偏移量,正数表示向容器底部方向的偏移,负数表示向容器顶部方向的偏移。
(6)verticalCenter - 子元素垂直中心线相对于容器垂直中心线的偏移量,正数表示向容器右侧的偏移,正数表示向容器左侧的偏移。
*说明:horizontalCenter、verticalCenter的优先级比其他四个属性的优先级更高,即当设置了horizontalCenter、verticalCenter,其他四个属性将被忽略。此外,Constraint-based布局必须在absolute的基础布局中才有效。由于Canvas容器的布局有且仅有absolute的,因此在Canvas中可以直接使用Constraint-based布局,而在其他容器中需要将layout属性设置为absolute后Constraint-based布局才有效,而且使用了Constraint-based布局后,设置x/y坐标将不再有意义。
特殊布局
1. Box
在absolute布局中,子元素的位置不会随着容器的大小的变化而重新调整,这在窗口大小发生变化可能会对界面的布局产生不可预料的影响,很多情况下希望子元素的位置能够随容器的大小变化而自动调整,Box布局就可以满足这个需求。Box布局分为HBox和VBox,其中HBox布局与设置容器layout为horizontal是一致的,将子元素水平排列在一行中,而VBox则是将子元素垂直排在一列中。
2. DividedBox
分为HDividedBox和VDividedBox,DividedBox会将子元素划分为一个独立的分区,并且各个分区之间会存在一条调整栏,通过调整栏用于可以手动的调整各个分区的大小。
3. Tile
与HBox类似,也会将子元素水平放置,不过不同的是tile并不将所有子元素放置在单独一行,而是在即将超过tile的宽度时进行换行。
4. Grid
与HTML中的Table很相似,可以定义行数、列数,并选择一个单元格来放置子元素。
5. Form
表单容器,用于构建表单,生成特定的表单布局。