Flex中如何创建一个可以自动换行并调整布局的ToolBar容器

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="top"
5. backgroundColor="white">
7. <mx:Arrayid="images">
8. <mx:Objectlabel="Button" />
9. <mx:Objectlabel="ButtonBar" />
10. <mx:Objectlabel="CheckBox" />
11. <mx:Objectlabel="ColorPicker" />
12. <mx:Objectlabel="ComboBox" />
13. <mx:Objectlabel="DataGrid" />
14. <mx:Objectlabel="DateChooser" />
15. <mx:Objectlabel="DateField" />
16. <mx:Objectlabel="HorizontalList" />
17. <mx:Objectlabel="HRule" />
18. <mx:Objectlabel="HSlider" />
19. <mx:Objectlabel="Image" />
20. <mx:Objectlabel="Label" />
21. <mx:Objectlabel="LinkBar" />
22. <mx:Objectlabel="LinkButton" />
23. <mx:Objectlabel="List" />
24. <mx:Objectlabel="Menu" />
25. <mx:Objectlabel="MenuBar" />
26. <mx:Objectlabel="NumericStepper" />
27. <mx:Objectlabel="ProgressBar" />
28. <mx:Objectlabel="RadioButton" />
29. <mx:Objectlabel="RadioButtonGroup" />
30. <mx:Objectlabel="RichTextEditor" />
31. <mx:Objectlabel="Spacer" />
32. <mx:Objectlabel="SWFLoader" />
33. <mx:Objectlabel="TabBar" />
34. <mx:Objectlabel="Text" />
35. <mx:Objectlabel="TextArea" />
36. <mx:Objectlabel="TextInput" />
37. <mx:Objectlabel="TileList" />
38. <mx:Objectlabel="Tree" />
39. <mx:Objectlabel="VideoDisplay" />
40. <mx:Objectlabel="VRule" />
41. <mx:Objectlabel="VScrollBar" />
42. <mx:Objectlabel="VSlider" />
43. </mx:Array>
45. <mx:ApplicationControlBardock="true">
46. <mx:FormstyleName="plain">
47. <mx:FormItemlabel="percentWidth:">
48. <mx:HSliderid="slider"
49. minimum="0"
50. maximum="100"
51. value="35"
52. liveDragging="true"
53. snapInterval="1"
54. tickInterval="10"
55. dataTipPrecision="0"/>
56. </mx:FormItem>
57. </mx:Form>
58. </mx:ApplicationControlBar>
60. <mx:VBoxid="vBox"
61. verticalAlign="middle"
62. horizontalAlign="center"
63. backgroundColor="black"
64. backgroundAlpha="0.1"
65. width="100%"
66. height="200">
67. <mx:ToolBarid="toolBar"
68. percentWidth="{slider.value}"
69. backgroundColor="haloSilver"
70. minWidth="18">
71. <mx:Repeaterid="imgRepeater"
72. dataProvider="{images}">
73. <mx:Imageid="img"
74. source="assets/{imgRepeater.currentItem.label}.png"
75. toolTip="{imgRepeater.currentItem.label}"/>
76. </mx:Repeater>
77. </mx:ToolBar>
78. </mx:VBox>
80. </mx:Application>