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

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
				layout="vertical"   
				verticalAlign="top"   
				backgroundColor="white" 
				creationComplete="application1_creationCompleteHandler(event)">   
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
		
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				var toolbar:ToolBarAS= new ToolBarAS();
				var checkBox:CheckBox;
				toolbar.width=this.canvas.width*0.8;
				for(var i:int;i<50;i++){
					checkBox=new CheckBox();
					checkBox.label=i.toString();
					toolbar.addElement(checkBox);
				}
				this.canvas.addElement(toolbar);
			}
		]]>
	</mx:Script>
	
	<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:CheckBox id="checkbox" label="{imgRepeater.currentItem.label}"/>
			</mx:Repeater>   
		</mx:ToolBar>   
	</mx:VBox>   
	
	<mx:Canvas id="canvas" x="500" width="450" height="97">
	</mx:Canvas>
	
</mx:Application> 

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

上面的例子主要应用了toolbar和repeater两种组件，toolbar是动态给组件布局的，repeater是用来生成多个重复组件的。