使用按鈕組件切換selectedIndex

Question

我想控制主應用程序上ViewStack的selectedIndex屬性。我在main.mxml中分配了一個變量。我試圖通過自定義組件中的函數來操作該變量; viewControl.mxml。我已經能夠用buttonBar模擬效果，但我寧願用按鈕來完成。

Main.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      xmlns:comps="comps.*" minWidth="955" minHeight="600"> 
<fx:Script> 
    <![CDATA[ 
     import comps.viewControl; 

     [Bindable] 
     public var mainIndex:int = 0; 


    ]]> 
</fx:Script> 

<comps:viewControl id="myControl"/> 

<mx:ViewStack id="lgViewStack" selectedIndex="{mainIndex}"> 

    <s:NavigatorContent id="view1"> 
     <s:Panel id="firstPanel"> 
     </s:Panel> 
    </s:NavigatorContent> 
    <s:NavigatorContent id="view2"> 
     <s:Panel id="secondPanel"> 
     </s:Panel> 
    </s:NavigatorContent> 

</mx:ViewStack> 

和組件viewControl.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> 

<fx:Script> 
    <![CDATA[ 

     protected function changeView(index:int):void 
     { 
      mainIndex = index; 

     } 
    ]]> 
</fx:Script> 

<s:Button id="myButton" click="changeView(1);"/> 

在編譯時，我收到以下錯誤信息：未定義的屬性mainIndex的訪問在viewControl.mxml中。有什麼我可以做的功能集或功能獲取從Main.mxml mainIndex？

Answer 1

正如您的評論中提到的那樣，變量的範圍是問題。有很多方法可以滿足您的需求，但基本上您需要一個可以在同一個作用域（又稱爲另一個類）中引用視圖堆棧和視圖控件的地方。創建完整的框架只是爲了提供一種在需要它們的地方獲取這些引用的方法，但是對於您的情況來說，它很簡單，因爲父組件既已引用它們。

在您的視圖組件，創建一個本地（公共和綁定）變量存儲基礎上，按一下按鈕當前指數...

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> 

<fx:Script> 
    <![CDATA[ 

     [Bindable] 
     public var selectedIndex:int; 

     protected function changeView(index:int):void 
     { 
      this.selectedIndex = index; 

     } 
    ]]> 
</fx:Script> 

<s:Button id="myButton" click="changeView(1);"/> 

然後在父組件，您可以直接綁定到的selectedIndex的視圖組件...

<comps:viewControl id="myControl"/> 

<mx:ViewStack id="lgViewStack" selectedIndex="{myControl.selectedIndex}"> 
</mx:ViewStack> 

另一種方法是在索引更改時在viewControl中分派一個事件。然後，您可以做這樣的事情在父組件使用事件處理程序...

protected myControl_changeHandler(event:Event):void 
{ 
    this.mainIndex = myControl.selectedIndex; 
} 

這種方式可以確保您的父組件有一個最新的參考指標，以及...