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