Flex3 界面布局教程第二篇

2024-09-12 17:51:29

字體：大中小

供稿：網(wǎng)友

Form 表單布局

Form容器是Flex 表單中處于最外層的容器，負(fù)責(zé)控制表單的大小，以及布局，通常表單中都是垂直布局，并且靠左對齊的。這個容器可以包含FormHeading以及FormItem。舉個簡單的例子。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ private function submitForm():void { // Handle the form submission. } ]]> </mx:Script> <mx:Form id="myForm" width="400"> <mx:FormHeading label="Billing Information"/> <mx:FormItem label="First Name"> <mx:TextInput id="fname" width="100%"/> </mx:FormItem> <mx:FormItem label="Last Name"> <mx:TextInput id="lname" width="100%"/> </mx:FormItem> <mx:FormItem label="Address"> <mx:TextInput id="addr1" width="100%"/> <mx:TextInput id="addr2" width="100%"/> </mx:FormItem> <mx:FormItem label="City / State" direction="vertical"> <mx:TextInput id="city"/> <mx:ComboBox id="st" width="75"> <mx:ArrayCollection> <mx:String>MA</mx:String> <mx:String>NH</mx:String> <mx:String>RI</mx:String> </mx:ArrayCollection> </mx:ComboBox> </mx:FormItem> <mx:FormItem label="ZIP Code"> <mx:TextInput id="zip" width="100"/> </mx:FormItem> <mx:FormItem label="Country"> <mx:ComboBox id="cntry"> <mx:ArrayCollection> <mx:String>USA</mx:String> <mx:String>UAE</mx:String> <mx:String>UAW</mx:String> </mx:ArrayCollection> </mx:ComboBox> </mx:FormItem> <mx:FormItem> <mx:HRule width="200" height="1"/> <mx:Button label="Submit Form" click="submitForm();"/> </mx:FormItem> </mx:Form> </mx:Application>

效果圖：

Grid布局

Grid通過網(wǎng)格的方法來放置組件，其實是把組件作為橫縱方向的一個單元來實現(xiàn)的。<mx:Grd>來創(chuàng)建一個Grid容器。<mx:GridRow>創(chuàng)建每一行，但是這個標(biāo)記必須是<mx:Grd>子標(biāo)記。同樣利用<mx:GridItem>可以創(chuàng)建每一行中的單元組件，而且這個標(biāo)記也必須為<mx:GridRow>子標(biāo)記。

<?xml version="1.0"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Grid id="myGrid">  <mx:GridRow id="row1">  <mx:GridItem> <mx:Button label="Button 1"/> </mx:GridItem> <mx:GridItem> <mx:Button label="2"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3a"/> </mx:GridItem> <mx:GridItem> <mx:Button label="Button 3b"/> </mx:GridItem> </mx:GridRow>  <mx:GridRow id="row2">  <mx:GridItem colSpan="3" horizontalAlign="center"> <mx:Button label="Long-Named Button 4"/> </mx:GridItem> </mx:GridRow>  <mx:GridRow id="row3">  <mx:GridItem/>  <mx:GridItem colSpan="2" horizontalAlign="center"> <mx:Button label="Button 5"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </mx:Application>

如圖：

Panel 容器

這個就比較簡單了。Panel具有Canvas HBox VBox的所有功能,如果Panel的layout屬性值為 absolute則Panel對子級元素的布局方式和Canvas一樣當(dāng)為 horizontal時則相當(dāng)于 HBox 為vertical時則相當(dāng)于VBox并且可以為 Panel指定標(biāo)題.

<?xml version="1.0"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="Panel layout" width="100%" height="100%"> <mx:Label name="Label1"/> <mx:Button label="button1"/> </mx:Panel> </mx:Application>

效果如圖：

TitelWindow容器

TitleWindow繼承自Panel,與Panel相比,它只多了一個對象,那就是關(guān)閉按鈕,通過 TitleWindow close事件觸發(fā)該按鈕的單擊事件它并不會自動將TitleWindow本身關(guān)閉,而是通過我們?yōu)樵撌录鶎懙拇a決定。

<?xml version="1.0"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.controls.Alert; private function closeEvent():void{ Alert.show("you click the close","close"); } ]]></mx:Script> <mx:TitleWindow title="Title" width="100%" height="100%" showCloseButton="true" close="closeEvent()"> <mx:Button label="Button"/> </mx:TitleWindow> </mx:Application>

效果如圖：

Title layout 容器

所有的Titel容器中的單元組件都是具有相同大小尺寸的。這與Grid容器明顯不一樣了。這樣就會出現(xiàn)這種情況，比如擬定每一行放置3個組件，你剛好有7個組件，那么就會分成3行放置，這樣的話，最后一行就只有組件了。Title容器就具有這個特點。

<?xml version="1.0"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Tile id="myFlow" direction="horizontal" borderStyle="solid" paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10" verticalGap="15" horizontalGap="10"> <mx:TextInput id="text1" text="1" height="50" width="75"/> <mx:TextInput id="text2" text="2" height="50" width="100"/> <mx:TextInput id="text3" text="3" height="50" width="75"/> <mx:TextInput id="text4" text="4" height="50" width="75"/> <mx:TextInput id="text5" text="5" height="50" width="75"/> </mx:Tile> </mx:Application>

效果如圖：