技術(shù)分享 FlexBuilder2.0中如何定義約束的布局
在學(xué)習(xí)Flex的過(guò)程中，你可能會(huì)遇到FlexBuilder2.0中定義約束的布局的問(wèn)題，這里和大家分享一下，相信通過(guò)本文的介紹你對(duì)FlexBuilder2.0中定義約束的布局有深刻的認(rèn)識(shí)。
FlexBuilder2.0中定義約束的布局
這個(gè)速學(xué)教程教你該如何在FlexBuilder2.0中創(chuàng)建基于約束的布局。一個(gè)基于約束的布局確保當(dāng)在用戶重設(shè)置應(yīng)用程序窗口大小時(shí)，應(yīng)用程序中的組件會(huì)聰明地自我調(diào)節(jié)大小。
定義約束的布局
給組件在你的布局定位完后, 你將定義約束的布局,它能使組件跟隨應(yīng)用程序窗口自我調(diào)整大小。
1.在設(shè)計(jì)視圖,選擇TextInput組件。
2.在Flex屬性面板,確定Layout類別已被展開(kāi)。Layout類別包含設(shè)置固定的選項(xiàng)。
3.定義約束的布局,在Layout類別中點(diǎn)擊左邊與右邊的固定選框,并在左邊文本框輸入90,右邊文文本框輸入60。這是TextInput控件與Canvas容器的左邊與右邊保持的距離,如下:
這兩個(gè)固定選框, 跟隨窗口固定TextInput控件的左右兩邊。在文本框中輸入的數(shù)字是指定TextInput控件與Canvas容器保持的距離有多遠(yuǎn)(單位:像素(pixels))。
這些約束在MXML代碼里被表示如下：
程序代碼：
- <mx:TextInput y="60">
- <mx:layoutConstraints>
- <mx:EdgeAnchor left="90" right="60"/>
- </mx:layoutConstraints>
- </mx:TextInput>
4.在Canvas容器中選擇TextArea控件,在Flex屬性面板中,選擇所有的四個(gè)固定選框并輸入與邊緣保持的距離,如下:
◆ left: 90
◆ right: 60
◆top: 90
◆ bottom: 190
TextArea的Flex屬性面板如下:
5.在Canvas容器中選擇TextArea控件,在Flex屬性面板中,選上右邊與下邊的固定選框,并在右邊文本框輸入60,下邊文本框輸入150。
6.保存文件,等待FlexBuilder2.0直到編譯完成應(yīng)用程序,再點(diǎn)擊工具條上的Run按鈕。
瀏覽器自動(dòng)打開(kāi)并運(yùn)行你的Flex應(yīng)用程序。
7.拖動(dòng)應(yīng)用程序的窗口的邊緣,使應(yīng)用程序的窗口變大或變小。
例如, 如果你將應(yīng)用程序的窗口縮小, Button控件會(huì)向內(nèi)移動(dòng), TextInput與TextArea控件將會(huì)跟隨縮小。
如果你將應(yīng)用程序的窗口拖長(zhǎng), Button控件會(huì)向外移動(dòng), TextInput與TextArea控件將會(huì)跟隨拖長(zhǎng)。
這個(gè)速學(xué)教程中,已教會(huì)你該如何在FlexBuilder2.0中創(chuàng)建基于約束的布局。
【編輯推薦】
- FlexBuilder2.0中創(chuàng)建基于約束的布局
- FlexBuilder2.0 速學(xué)教程之編譯應(yīng)用程序
- Flex及FlexBuilder2.0開(kāi)發(fā)環(huán)境詳解
- FlexBuilder3.0與Eclipse3.4的***結(jié)合
- Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則
