반응형
Setting the vertical gap between items in a Flex VBox container
The following example shows how you can control the amount of vertical spacing between items in a VBox container by setting the verticalGap style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/03/setting-the-vertical-gap-between-items-in-a-flex-vbox-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HSlider { dataTipPlacement: bottom; dataTipPrecision: 0; } </mx:Style> <mx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.events.SliderEvent; private function slider_change(evt:SliderEvent):void { vBox.setStyle("verticalGap", evt.value); } private function vBox_creationComplete(evt:FlexEvent):void { slider.value = vBox.getStyle("verticalGap"); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="verticalGap:" direction="horizontal"> <mx:HSlider id="slider" minimum="0" maximum="20" liveDragging="true" snapInterval="1" tickInterval="1" change="slider_change(event);" /> <mx:Label text="{slider.value}" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:VBox id="vBox" width="100%" creationComplete="vBox_creationComplete(event);"> <mx:Box width="100%" height="50" backgroundColor="red" /> <mx:Box width="100%" height="50" backgroundColor="haloOrange" /> <mx:Box width="100%" height="50" backgroundColor="yellow" /> <mx:Box width="100%" height="50" backgroundColor="haloGreen" /> <mx:Box width="100%" height="50" backgroundColor="haloBlue" /> </mx:VBox> </mx:Application>
View source is enabled in the following example.
