Flex3 界面布局教程第二篇

2024-09-12 17:51:29

字體：大中小

供稿：網(wǎng)友

Form 表單布局

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

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

這個(gè)就比較簡(jiǎn)單了。Panel具有Canvas HBox VBox的所有功能,如果Panel的layout屬性值為 absolute則Panel對(duì)子級(jí)元素的布局方式和Canvas一樣當(dāng)為 horizontal時(shí)則相當(dāng)于 HBox 為vertical時(shí)則相當(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相比,它只多了一個(gè)對(duì)象,那就是關(guān)閉按鈕,通過(guò) TitleWindow close事件觸發(fā)該按鈕的單擊事件它并不會(huì)自動(dòng)將TitleWindow本身關(guān)閉,而是通過(guò)我們?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容器明顯不一樣了。這樣就會(huì)出現(xiàn)這種情況，比如擬定每一行放置3個(gè)組件，你剛好有7個(gè)組件，那么就會(huì)分成3行放置，這樣的話，最后一行就只有組件了。Title容器就具有這個(gè)特點(diǎn)。

<?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>

效果如圖：