3.10.控制Box 组件的布局

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="100direction="{_direction}id="vbox">
<mx:Panel width="90height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90height="60">
<mx:Label text="Some Text" />
</mx:Panel>
<mx:Panel width="90height="60">
<mx:Label text="Some Text" />
</mx:Panel>
</mx:Box>

因为verticalGap 是可绑定属性,我们可以在运行时调用setStyle()方法动态地设置它。

加支付宝好友偷能量挖...


评论(0)网络
阅读(104)喜欢(0)flash/flex/fcs/AIR