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是用來生成多個重複組件的。