本文和大家重點(diǎn)討論一下如何為Flex應(yīng)用程序設(shè)計(jì)界面布局，許多容器組件都允許以絕對(duì)坐標(biāo)的方式創(chuàng)建布局，你可以對(duì)應(yīng)其父容器的相對(duì)位置來(lái)放置組件并約束它們，使它們?cè)贔lex應(yīng)用程序的界面放大或縮小時(shí)仍然保持其彼此的位置。

為Flex應(yīng)用程序設(shè)計(jì)界面布局

讓我們來(lái)詳細(xì)分析一下前面那個(gè)“SayHellotoFlex“的簡(jiǎn)單例子，你可以通過(guò)設(shè)置組件的屬性值來(lái)控制Flex應(yīng)用程序的界面布局，就象如下所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"  
right="30"/> 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application> 

許多容器組件都允許以絕對(duì)坐標(biāo)的方式創(chuàng)建布局，這就意義著你可以使用精確的x和y的坐標(biāo)來(lái)放置組件。你還可以對(duì)應(yīng)其父容器的相對(duì)位置來(lái)放置組件并約束它們，使它們?cè)贔lex應(yīng)用程序的界面放大或縮小時(shí)仍然保持其彼此的位置。

在這個(gè)例子中，面板/Panel組件的布局屬性被設(shè)置為絕對(duì)值方式，同時(shí)所有容器的大小都被設(shè)置為應(yīng)用程序的百分之八十。兩個(gè)組件（TextArea和Button）被放置到距離面板容器邊界的特定象素位置上。

使用風(fēng)格和主題增強(qiáng)視覺(jué)方面的設(shè)計(jì)

如果樣式/style的屬性值沒(méi)有被指定，它們將由整個(gè)程序中運(yùn)行的主題/theme來(lái)進(jìn)行控制。在默認(rèn)情況下，F(xiàn)lex應(yīng)用程序使用Halo主題（就象上面那個(gè)例子那樣）。當(dāng)然，你可以修改默認(rèn)的主題或者干脆自己創(chuàng)建一個(gè)。你還可以簡(jiǎn)單地指定新的樣式定義來(lái)改變默認(rèn)的主題樣式，就象這樣：
 

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
 
<mx:Style> 
TextArea{  
font-size:36px;  
font-weight:bold;  
}  
</mx:Style> 
 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"x="122"y="24"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"right="30"/> 
 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application> 
 

 通過(guò)明確地為TextArea組件定義一個(gè)樣式，應(yīng)用程序現(xiàn)在看起來(lái)就會(huì)象這樣了：

在這個(gè)例子中，一種新樣式在MXML文件中的<mx:Style>標(biāo)簽里進(jìn)行了定義。如同我們前面所提到過(guò)的，你還可以通過(guò)修改主題或應(yīng)用新主題、使用一個(gè)外部CSS文件、或者設(shè)置單獨(dú)的樣式屬性來(lái)達(dá)到設(shè)置新樣式的目的。
將一個(gè)樣式單導(dǎo)入到MXML文件中，你需要添加如下的代碼：
 

<mx:Stylesourcemx:Stylesource="styles.css"/> 

【編輯推薦】

1. Flex應(yīng)用程序的開(kāi)發(fā)，編譯和發(fā)布
2. Flex應(yīng)用程序組成元素和開(kāi)發(fā)步驟解析
3. 學(xué)習(xí)總結(jié) 在Flex中如何嵌入Flex字體
4. 深入探究Flex應(yīng)用程序使用
5. Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況