Flex中如何利用timer控制改变ViewStack当前选中Index

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="init();">



<mx:Script>

<![CDATA[

private var timer:Timer;



private function init():void {

timer = new Timer(1000); /* 1000ms == 1second */

timer.addEventListener(TimerEvent.TIMER, onTimer);

}



private function onTimer(evt:TimerEvent):void {

var idx:uint = viewStack.selectedIndex;

var max:uint = viewStack.numChildren;



var newIdx:uint = ++idx % max;

viewStack.selectedIndex = newIdx;

}



private function startTimer():void {

if (!timer.running) {

timer.start();

}

}



private function stopTimer():void {

if (timer.running) {

timer.stop();

}

}

]]>

</mx:Script>



<mx:ApplicationControlBar dock="true">

<mx:Button label="Start timer" click="startTimer();" />

<mx:Button label="Stop timer" click="stopTimer();" />



<mx:Spacer width="100%" />



<mx:Label text="selectedIndex:" />

<mx:HSlider id="slider"

minimum="0"

maximum="3"

liveDragging="true"

snapInterval="1"

tickInterval="1"

change="viewStack.selectedIndex = event.value;" />

</mx:ApplicationControlBar>



<mx:ViewStack id="viewStack" width="100%" height="100%">

<mx:VBox backgroundColor="haloBlue"

width="100%"

height="100%">

<mx:Label text="VBox 1" />

</mx:VBox>

<mx:VBox backgroundColor="haloGreen"

width="100%"

height="100%">

<mx:Label text="VBox 2" />

</mx:VBox>

<mx:VBox backgroundColor="haloOrange"

width="100%"

height="100%">

<mx:Label text="VBox 3" />

</mx:VBox>

<mx:VBox backgroundColor="haloSilver"

width="100%"

height="100%">

<mx:Label text="VBox 4" />

</mx:VBox>

</mx:ViewStack>



</mx:Application>