Flex中如何通过verticalGap样式，设置VBox的各项间间距

main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="vertical"
4. verticalAlign="middle"
5. backgroundColor="white">
7. <mx:Style>
8. HSlider {
9. dataTipPlacement: bottom;
10. dataTipPrecision: 0;
11. }
12. </mx:Style>
14. <mx:Script>
15. <![CDATA[
16. import mx.events.FlexEvent;
17. import mx.events.SliderEvent;
19. private function slider_change(evt:SliderEvent):void {
20. vBox.setStyle("verticalGap", evt.value);
21. }
23. private function vBox_creationComplete(evt:FlexEvent):void {
24. slider.value = vBox.getStyle("verticalGap");
25. }
26. ]]>
27. </mx:Script>
29. <mx:ApplicationControlBardock="true">
30. <mx:FormstyleName="plain">
31. <mx:FormItemlabel="verticalGap:"
32. direction="horizontal">
33. <mx:HSliderid="slider"
34. minimum="0"
35. maximum="20"
36. liveDragging="true"
37. snapInterval="1"
38. tickInterval="1"
39. change="slider_change(event);"/>
40. <mx:Labeltext="{slider.value}" />
41. </mx:FormItem>
42. </mx:Form>
43. </mx:ApplicationControlBar>
45. <mx:VBoxid="vBox"
46. width="100%"
47. creationComplete="vBox_creationComplete(event);">
48. <mx:Boxwidth="100%" height="50" backgroundColor="red" />
49. <mx:Boxwidth="100%" height="50" backgroundColor="haloOrange" />
50. <mx:Boxwidth="100%" height="50" backgroundColor="yellow" />
51. <mx:Boxwidth="100%" height="50" backgroundColor="haloGreen" />
52. <mx:Boxwidth="100%" height="50" backgroundColor="haloBlue" />
53. </mx:VBox>
55. </mx:Application>