Flex中支持自动换行排列的ToolBar

在flex开发过程当中，有的时候需要能自动换行的容器，但是Tile和Grid并不理想，比如说Tile，虽然能自动换行排列组件，但是Tile组件却不好在运行的时候动态改变自己的大小。ToolBar是一个官方不推荐用的组件，所以在他的文档里找不到这个类，用ExcludeCalss标了出来，不知道在为来的版本当中是否会加入，不过即使将来没有了这个组件也没有关系的，它的源代码并不到，可以在FlexSdk中找到它的as文件，是一个扩展自Container的类。由于它被MetaData标签标为了ExcludeClass所以flexBuilder3并不能识别这个标签，在设计视图显示为一个红色叉号，如果要用的话你可以定义一个自定义的 as类型的组件让他继承自ToolBar即可直接在flexBuilder中用了。如果不这样做的话也不影响使用，只是在设计视图里显示为红色的叉号但并不影响它运行。

以下是它的使用例子：

index.mxml:

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Array id="images"> <mx:Object label="Button" /> <mx:Object label="ButtonBar" /> <mx:Object label="CheckBox" /> <mx:Object label="ColorPicker" /> <mx:Object label="ComboBox" /> <mx:Object label="DataGrid" /> <mx:Object label="DateChooser" /> <mx:Object label="DateField" /> <mx:Object label="HorizontalList" /> <mx:Object label="HRule" /> <mx:Object label="HSlider" /> <mx:Object label="Image" /> <mx:Object label="Label" /> <mx:Object label="LinkBar" /> <mx:Object label="LinkButton" /> <mx:Object label="List" /> <mx:Object label="Menu" /> <mx:Object label="MenuBar" /> <mx:Object label="NumericStepper" /> <mx:Object label="ProgressBar" /> <mx:Object label="RadioButton" /> <mx:Object label="RadioButtonGroup" /> <mx:Object label="RichTextEditor" /> <mx:Object label="Spacer" /> <mx:Object label="SWFLoader" /> <mx:Object label="TabBar" /> <mx:Object label="Text" /> <mx:Object label="TextArea" /> <mx:Object label="TextInput" /> <mx:Object label="TileList" /> <mx:Object label="Tree" /> <mx:Object label="VideoDisplay" /> <mx:Object label="VRule" /> <mx:Object label="VScrollBar" /> <mx:Object label="VSlider" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="percentWidth:"> <mx:HSlider id="slider" minimum="0" maximum="100" value="35" liveDragging="true" snapInterval="1" tickInterval="10" dataTipPrecision="0" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:VBox id="vBox" verticalAlign="middle" horizontalAlign="center" backgroundColor="black" backgroundAlpha="0.1" width="100%" height="200"> <mx:ToolBar id="toolBar" percentWidth="{slider.value}" backgroundColor="haloSilver" minWidth="18"> <mx:Repeater id="imgRepeater" dataProvider="{images}"> <mx:Image id="img" source="assets/{imgRepeater.currentItem.label}.png" toolTip="{imgRepeater.currentItem.label}" /> </mx:Repeater> </mx:ToolBar> </mx:VBox> </mx:Application>

ToolBar的原文件在：

[SDK Directory]/frameworks/projects/framework/src/mx/controls/richTextEditorClasses/ToolBar.as

 

更多的详细信息请看：http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/