接下来,我将通过简单的示例逐个介绍各种界面布局的设计。
Canvas layout 容器
Canvas的界面布局,它定义了一个矩形框架的区域,用来放置用户的容器和控件。不像其他的组件,你不能放任Flex的控件。你必须指定absolute或者constraint-based来指定组件的位置。Absolute模式必须指定x,y坐标。 Constrain-based必须指定side, baseline,或者center anchors. 接下来具体介绍两种布局方式:
Absolute模式:你可以指定x,y坐标来指定每个组件的在容器的位置。坐标的是相对canvas 容器的左上角来设计的。即容器的左上角坐标为(0,0). X.y可以为正负值,如果是负值的话,组件就会放在超出容器可是范围的位置。当然可以利用Actionscript来完成移动的操作,这就涉及到的event事件。
|
效果如下图:
constraint-based模式:这个分别介绍canvas 的Vbox以及Hbox的两种组合。Canvas通常有x,y指定组件的位置,x,y默认的应该是0.所以你如果不指定x,那么将把组件放在x=0,的位置。这样有可能出现重叠现象。当然也可以指定其他模式的布局,比如Vbox,或者Hbox。这样就可以不指定x,y了。
|
效果如下图:
Vbox或者Hbox 布局
前面介绍的把Vbox或者Hbox嵌入Canvas。其实他们本身都是一个容器,可以独立使用的。效果跟上面图中显示的是一样的。所以关于VBox,HBox就不再加以介绍了。举个例子好了:
|
效果图如下:
ControlBar layout 容器
你可以把controlbar和panel 或者titlewindow容器组合起来使用。这样做的好处容器里的组件可以被panel或者titlewindow里的组件共用。(原文:You use the ControlBar container with a Panel or TitleWindow container to hold components that can be shared by the other children in the Panel or TitleWindow container.)举个例子:
|
效果图:
ApplicationControlBar 容器
这个主要用来做界面顶部的导航条。这个容器menubar, combox button等组件。举个例子:
|
效果图:
DividedBox, HDividedBox 和VDividedBox 布局
其实呢,DividedBox,与Box 是非常类似的,唯一不同的在于它子Box板块自建加入了一条分隔条,用户可以更具自己需要来调整各个子Box板块的大小。子Box板块的分布可以分成两种,水平以及垂直的。比如:
实现的代码如下:
|
Form 表单布局
Form容器是Flex 表单中处于最外层的容器,负责控制表单的大小,以及布局,通常表单中都是垂直布局,并且靠左对齐的。这个容器可以包含FormHeading以及FormItem。举个简单的例子。
|
Grid布局
Grid通过网格的方法来放置组件,其实是把组件作为横纵方向的一个单元来实现的。<mx:Grd>来创建一个Grid容器。<mx:GridRow>创建每一行,但是这个标记必须是<mx:Grd>子标记。同样利用<mx:GridItem>可以创建每一行中的单元组件,而且这个标记也必须为<mx:GridRow>子标记。
|
Panel 容器
这个就比较简单了。Panel具有Canvas HBox VBox的所有功能,如果Panel的layout属性值为 absolute则Panel对子级元素的布局方式和Canvas一样当为 horizontal时则相当于 HBox 为vertical时则相当于VBox并且可以为 Panel指定标题.
|
TitelWindow容器
TitleWindow继承自Panel,与Panel相比,它只多了一个对象,那就是关闭按钮,通过 TitleWindow close事件触发该按钮的单击事件它并不会自动将TitleWindow本身关闭,而是通过我们为该事件所写的代码决定。
|
效果如图:
Title layout 容器
所有的Titel容器中的单元组件都是具有相同大小尺寸的。这与Grid容器明显不一样了。这样就会出现这种情况,比如拟定每一行放置3个组件,你刚好有7个组件,那么就会分成3行放置,这样的话,最后一行就只有组件了。Title容器就具有这个特点。
|
效果如图: