使用按钮组件切换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; 
} 

这种方式可以确保您的父组件有一个最新的参考指标，以及...