3.10.控制Box 組件的布局

2024-04-27 13:51:49

字體：大中小

供稿：網(wǎng)友

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

horizontalAlign
決定子組件的橫向?qū)R方式，可以設(shè)置為left、right 或者center

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

verticalAlign
決定子組件的縱向?qū)R方式，可以設(shè)置為top、bottom 或者center

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

下面的例子，作為示范，將所有的屬性邦定到控件上實(shí)現(xiàn)動態(tài)變化。

-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>