3.10.控制Box 組件的布局

2024-04-27 13:51:49

字體：大中小

來源：轉載

供稿：網友

3.10.1 問題
你既要控制Box 組件的橫向和縱向布局，也要控制組件之間的橫向和縱向間距及其子組件的居中設置。
3.10.2 解決辦法
使用verticalAlign 和horizontalAlign 屬性同時使用direction 屬性設置Box 的布局方向。
3.10.3 討論
mx.containers.Box 類定義了幾個屬性，來控制Box 內的子組件的布局。它們是：
direction
決定容器如何布置其子組件。值可為vertical 或horizontal。

horizontalAlign
決定子組件的橫向對齊方式，可以設置為left、right 或者center

horizontalGap
在direction 屬性為horizontal 的時候，決定了子組件之間的間距。如果direction為非horizontal 的值，則horizontalGap 屬性可以忽略。

verticalAlign
決定子組件的縱向對齊方式，可以設置為top、bottom 或者center

verticalGap
在direction 屬性為vertical 的時候，決定了子組件之間的間距。如果direction 為非vertical 的值，則verticalGap 屬性可以忽略。

下面的例子，作為示范，將所有的屬性邦定到控件上實現動態變化。

-XML

<mx:HSlider change="{vbox.verticalGap = vSlider.value*10}"
id="vSlider"/>
<mx:VBox y="100" direction="{_direction}" id="vbox">
<mx:Panel width="90" height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90" height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90" height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90" height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90" height="60">
<mx:Label text="Some Text" />
</mx:Panel>
</mx:Box>