Flex3界面布局教程(1)

对于一个拥有丰富组件的GUI设计工具来说，界面的布局技术成为界面美化的一个重要方面。Flex从控件的功能上大致提供了两种方法：容器（控制布局），组件（提供GUI实质功能处理）。使用容器分层次管理GUI是当前的趋势,Flex也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理。

 

Canvas的界面布局，它定义了一个矩形框架的区域，用来放置用户的容器和控件。不像其他的组件，你不能放任Flex的控件。你必须指定absolute或者constraint-based来指定组件的位置。Absolute模式必须指定x,y坐标。 Constrain-based必须指定side, baseline,或者center anchors. 接下来具体介绍两种布局方式：

Absolute模式：你可以指定x,y坐标来指定每个组件的在容器的位置。坐标的是相对canvas 容器的左上角来设计的。即容器的左上角坐标为(0,0). X.y可以为正负值，如果是负值的话，组件就会放在超出容器可是范围的位置。当然可以利用Actionscript来完成移动的操作，这就涉及到的event事件。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="219" height="230"> <mx:Canvas id="mycanvas" height="182" width="200" borderStyle="solid" backgroundColor="white"> <mx:Button x="10" y="10" label="button1"/> <mx:Button x="50" y="67" label="Button2"/> <mx:Button x="92" y="129" label="Button3"/> </mx:Canvas> </mx:WindowedApplication>

constraint-based模式：这个分别介绍canvas 的Vbox以及Hbox的两种组合。Canvas通常有x,y指定组件的位置，x,y默认的应该是0.所以你如果不指定x,那么将把组件放在x=0,的位置。这样有可能出现重叠现象。当然也可以指定其他模式的布局，比如Vbox,或者Hbox。这样就可以不指定x,y了。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Canvas width="340" height="247" backgroundColor="#FFFFFF"> <mx:VBox id="vb" left="10" right="248" y="26" height="153" backgroundColor="#A9C0E7"> <mx:Button label="button1" width="74"/> <mx:Button label="Button2"/> <mx:Button label="Button3"/> </mx:VBox> <mx:HBox id="hBox2" left="100" right="27" y="26" height="153" backgroundColor="#A9C0E7"> <mx:Button label="button4" /> <mx:Button label="Button5"/> <mx:Button label="Button6"/> </mx:HBox> <mx:Button label="Button8" y="200"/> <mx:Button label="Button7" y="190"/> </mx:Canvas>

 

Canvas layout 容器