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

By Minidxer | January 29, 2009

接下来的例子演示了Flex中如何利用timer控制改变ViewStack当前选中Index。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init();">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private var timer:Timer;
  11.  
  12.             private function init():void {
  13.                 timer = new Timer(1000); /* 1000ms == 1second */
  14.                 timer.addEventListener(TimerEvent.TIMER, onTimer);
  15.             }
  16.  
  17.             private function onTimer(evt:TimerEvent):void {
  18.                 var idx:uint = viewStack.selectedIndex;
  19.                 var max:uint = viewStack.numChildren;
  20.  
  21.                 var newIdx:uint = ++idx % max;
  22.                 viewStack.selectedIndex = newIdx;
  23.             }
  24.  
  25.             private function startTimer():void {
  26.                 if (!timer.running) {
  27.                     timer.start();
  28.                 }
  29.             }
  30.  
  31.             private function stopTimer():void {
  32.                 if (timer.running) {
  33.                     timer.stop();
  34.                 }
  35.             }
  36.         ]]>
  37.     </mx:Script>
  38.  
  39.     <mx:ApplicationControlBar dock="true">
  40.         <mx:Button label="Start timer" click="startTimer();" />
  41.         <mx:Button label="Stop timer" click="stopTimer();" />
  42.  
  43.         <mx:Spacer width="100%" />
  44.  
  45.         <mx:Label text="selectedIndex:" />
  46.         <mx:HSlider id="slider"
  47.                 minimum="0"
  48.                 maximum="3"
  49.                 liveDragging="true"
  50.                 snapInterval="1"
  51.                 tickInterval="1"
  52.                 change="viewStack.selectedIndex = event.value;" />
  53.     </mx:ApplicationControlBar>
  54.  
  55.     <mx:ViewStack id="viewStack" width="100%" height="100%">
  56.         <mx:VBox backgroundColor="haloBlue"
  57.                 width="100%"
  58.                 height="100%">
  59.             <mx:Label text="VBox 1" />
  60.         </mx:VBox>
  61.         <mx:VBox backgroundColor="haloGreen"
  62.                 width="100%"
  63.                 height="100%">
  64.             <mx:Label text="VBox 2" />
  65.         </mx:VBox>
  66.         <mx:VBox backgroundColor="haloOrange"
  67.                 width="100%"
  68.                 height="100%">
  69.             <mx:Label text="VBox 3" />
  70.         </mx:VBox>
  71.         <mx:VBox backgroundColor="haloSilver"
  72.                 width="100%"
  73.                 height="100%">
  74.             <mx:Label text="VBox 4" />
  75.         </mx:VBox>
  76.     </mx:ViewStack>
  77.  
  78. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: ViewStack | No Comments » | 2,870 views Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll