3.5.對容器使用基于約束的布局

2024-04-27 13:51:48

字體：大中小

來源：轉載

供稿：網友

3.5.1 問題
需要在父組件的內邊界基礎上來定義子組件的尺寸。
3.5.2 解決辦法
使用約束性屬性：left, right, top, and bottom.
3.5.3 討論
UIComponent 類的約束性屬性允許為組件定義制約于父組件裝訂線的寬度和高度。一個寬度為200 像素的組件，如果它的子組件的left 和right 屬性均為20 像素，則該子組件的寬度將為160 像素。同樣，高度為200 像素的組件的子組件如果bottom 屬性為40 像素，則會被局限在160 像素內。約束不會被應用到沒有絕對布局的組件中去，例如Hbox 或Vbox 組件。

子組件能夠使用約束型屬性的容器有Canvas、Panel 和Application.

在下面的例子里，內部Canvas 組件將距離外部Canvas 的頂部、左邊和右邊20 像素，底部延伸50 像素處放置，這樣就使得內部Canvas 變成360 像素寬，230 像素高。如果外部Canvas擴大或收縮，內部Canvas 仍然保持在所有方向上相同的裝訂線距離。組件內的Button 和TextInput 控件將根據內部Canvas 的尺寸，同時保持自身約束性屬性制定的裝訂線距離。

-XML

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300">
<mx:Canvas left="20" right="20" top="20" bottom="50"
id="innerCanvas ">
<mx:Button label="Button Label" left="20" right="20"
top="10"/>
<mx:TextInput left="30" right="30" bottom="10"/>
</mx:Canvas>
</mx:Canvas>