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 属性可以忽略。
下面的例子,作为示范,将所有的属性邦定到控件上实现动态变化。
因为verticalGap 是可绑定属性,我们可以在运行时调用setStyle()方法动态地设置它。
你既要控制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>
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>
因为verticalGap 是可绑定属性,我们可以在运行时调用setStyle()方法动态地设置它。
加支付宝好友偷能量挖...