Flex3 界面布局教程 第二篇

Form 表单布局

Form容器是Flex 表单中处于最外层的容器,负责控制表单的大小,以及布局,通常表单中都是垂直布局,并且靠左对齐的。这个容器可以包含FormHeading以及FormItem举个简单的例子。




private function submitForm():void {
// Handle the form submission.
}
]]>


















MA
NH
RI









USA
UAE
UAW









      效果图:Flex3 界面布局教程 第二篇_第1张图片

Grid布局

Grid通过网格的方法来放置组件,其实是把组件作为横纵方向的一个单元来实现的。来创建一个Grid容器。创建每一行,但是这个标记必须是子标记。同样利用可以创建每一行中的单元组件,而且这个标记也必须为子标记。

 











































如图:Flex3 界面布局教程 第二篇_第2张图片

Panel 容器

  这个就比较简单了。Panel具有Canvas HBox VBox的所有功能,如果Panellayout属性值为 absolutePanel对子级元素的布局方式和Canvas一样当为 horizontal时则相当于 HBox vertical时则相当于VBox并且可以为 Panel指定标题.

 





    
    



 效果如图:Flex3 界面布局教程 第二篇_第3张图片

TitelWindow容器

   TitleWindow继承自Panel,Panel相比,它只多了一个对象,那就是关闭按钮,通过 TitleWindow close事件触发该按钮的单击事件它并不会自动将TitleWindow本身关闭,而是通过我们为该事件所写的代码决定。

 





           import mx.controls.Alert;
     private function closeEvent():void{
     Alert.show("you click the close","close");
     }
     ]]>

 
 
 



效果如图:

Flex3 界面布局教程 第二篇_第4张图片

Title layout 容器

 所有的Titel容器中的单元组件都是具有相同大小尺寸的。这与Grid容器明显不一样了。这样就会出现这种情况,比如拟定每一行放置3个组件,你刚好有7个组件,那么就会分成3行放置,这样的话,最后一行就只有组件了。Title容器就具有这个特点。




direction="horizontal"
borderStyle="solid"
paddingTop="10" paddingBottom="10"
paddingRight="10" paddingLeft="10"
verticalGap="15" horizontalGap="10">







效果如图:

Flex3 界面布局教程 第二篇_第5张图片

你可能感兴趣的:(Flex3 界面布局教程 第二篇)