[Flex]如何動態變動TabBar元件的寬度

首頁 > Actionscript, Flex, 程式設計 > [Flex]如何動態變動TabBar元件的寬度

[Flex]如何動態變動TabBar元件的寬度

2010年7月11日/文章瀏覽次數:59 次

評論發表評論

在Flex中，我們常常會想要動態改變元件的屬性，其實很容易就可以做到此需求，所以要動態變動TabBar的寬度，在寫法上有兩種方式：

一、用資料繫結(Data Binding)的方式

將TabBar中的tabWidth屬性跟slider的值做綁定的動作，如{slider.value}，則當slider的值一變動時，TabBar的寬度也就隨之變動，屬於即時的狀態。

程式碼如下所示：

^?View Code ACTIONSCRIPT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="TabBar_tabWidth_test"
		xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">
 
	<mx:Array id="arr">
		<mx:Object label="Red" />
		<mx:Object label="Orange" />
		<mx:Object label="Yellow" />
		<mx:Object label="Green" />
		<mx:Object label="Blue" />
	</mx:Array>
 
	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="tabWidth:">
				<mx:HSlider id="slider"
						minimum="40"
						maximum="120"
						value="100"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>
 
	<mx:TabBar id="tabBar"
			dataProvider="{arr}"
			tabWidth="{slider.value}" />
 
</mx:Application>

二、用AS語法撰寫change Event

將slider的值變動觸發到change事件，再用setStyle的方式把slider.value塞到TabBar中去更改width值，如此也可以達到同樣的效果。

程式碼如下所示：

^?View Code ACTIONSCRIPT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="TabBar_tabWidth_test"
		xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white">
 
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;
 
			private function slider_change(evt:SliderEvent):void {
				tabBar.setStyle("tabWidth", evt.value);
			}
		]]>
	</mx:Script>
 
	<mx:Array id="arr">
		<mx:Object label="Red" />
		<mx:Object label="Orange" />
		<mx:Object label="Yellow" />
		<mx:Object label="Green" />
		<mx:Object label="Blue" />
	</mx:Array>
 
	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="tabWidth:">
				<mx:HSlider id="slider"
						minimum="40"
						maximum="120"
						value="100"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true"
						change="slider_change(event);" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>
 
	<mx:TabBar id="tabBar"
			dataProvider="{arr}"
			tabWidth="100"  />
 
</mx:Application>