从 AS 文件更改 selectedIndex

Question

我有一个简单的按钮功能，可以在不使用菜单栏组件的情况下更改视图堆栈上的 selectedIndex 。我从按钮上的 click 属性调用该函数，并传递一个 int 作为我想要跳转到的索引。当我在应用程序 MXML 文件上编写代码时，一切工作正常。将我的动作脚本移动到单独的文件后，我遇到了未定义的属性错误：

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

}

How do I get the .as file to recognize the myViewStack component?我是否需要在 .as 文件中的某个位置引用 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:comps ="components.*"
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1100" minHeight="1000" width="100%" height="100%" pageTitle="List Giant v2.3">

<mx:ViewStack id="lgViewStack" width="100%" height="100%" verticalCenter="0" horizontalCenter="0" selectedIndex="0">

<s:NavigatorContent label="HOME" width="100%" height="100%" id="homeView">
  <s:VGroup width="100%" height="100%" verticalCenter="0" horizontalCenter="0" gap="0" id="homeMainVG">
    <comps:TopNav>
    </comps:TopNav>

    <s:HGroup width="100%" height="90%" gap="0">
      <comps:LeftNav>
      </comps:LeftNav>

      <comps:HomeContent>
      </comps:HomeContent>

      <comps:RightNav>
      </comps:RightNav>
    </s:HGroup>
  </s:VGroup>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>

我将向您展示组件 HomeContent.mxml，因为它具有其他页面所具有的所有问题，但它是最小的文件：

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

<fx:Script source="../actions/ButtonHandlers.as"/>

<s:layout>
    <s:BasicLayout/>
</s:layout>
<s:Panel width="30%" height="200" left="10" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(6,lgViewStack);"/>
    <s:Label y="10" text="My Admin" horizontalCenter="0" fontWeight="bold" fontSize="24"/>
    <s:Label y="102.95" text="Click here to update your account information and settings." height="44" width="174" textAlign="center" horizontalCenter="-1" fontSize="10"/>
</s:Panel>
<s:Panel width="30%" height="200" horizontalCenter="0" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(2,lgViewStack);"/>
    <s:Label y="10" text="My Counts" horizontalCenter="0" fontWeight="bold" fontSize="24"/>
    <s:Label y="113.95" text="Click here to see you list counts." textAlign="center" verticalAlign="middle" horizontalCenter="0"/>
</s:Panel>
<s:Panel width="30%" height="200" right="10" top="0" dropShadowVisible="false" chromeColor="#FFFFFF" borderVisible="true">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <s:Button label="Go" horizontalCenter="0" verticalCenter="0" width="50%" click="changeView(4,lgViewStack);"/>
    <s:Label y="18" text="My Orders" horizontalCenter="0" fontSize="24" fontWeight="bold"/>
    <s:Label y="117" text="Click here to see your lsit orders." textAlign="center" verticalAlign="middle" horizontalCenter="0"/>
</s:Panel>
<s:Panel width="96%" height="75%" horizontalCenter="0" bottom="50" dropShadowVisible="false">
    <s:Label text="List Giant Community News" left="10" top="10" fontWeight="bold" fontSize="20"/>
    <s:SkinnableDataContainer width="100%" height="100%" left="0" top="35"/>
    <mx:HRule horizontalCenter="0" top="225" width="90%"/>
    <mx:HRule horizontalCenter="0" top="450" width="90%"/>
    <s:Label x="32" y="46" text="LG World"/>
    <s:Label x="32" y="233" text="Promotions"/>
    <s:Label x="32" y="458" text="Resources"/>
</s:Panel>

最后是具有相关函数的 .as 文件：

import mx.containers.ViewStack;

protected function changeView(index:int, myViewStack:ViewStack):void
{
myViewStack.selectedIndex = index;

}

Answer 1

您是否将 ActionScript 移至包含文件？还是新班级？这个新文件是如何包含在您的应用程序 MXML 文件中的？我怀疑你的问题是范围问题。我将在假设您创建了一个新类的情况下继续写作。所以，你有这样的东西：

主应用程序
|-- 带changeView函数的类
|-- ViewStack

在这样的架构中；主应用程序可以调用方法，或者在changeView类或ViewStack上设置属性。 ChangeView 类或 ViewStack 可以通过分派事件与主应用程序“对话”。但是，changeView 类无法以任何方式与 ViewStack 对话；并且 ViewStack 无法与changeView 类对话。

在此架构中，changeView 类出现“未定义属性”错误的原因是，changeView 类没有名为 myViewStack 的变量。它对其父级和子级的实例变量/子级一无所知。

您有几个选择：

让changeView 类调度一个事件，主应用程序将侦听该事件，然后更改ViewStack 上的selectedIndex。这听起来太过分了；并且几乎从一开始就违背了“封装”此功能的目的。

您可以将 viewStack 变量作为参数传递到changeView 类中，或者将其设置为实例变量并以这种方式进行更改。像这样：

protected function changeView(index:int, myViewStack:ViewStack):void
{
    myViewStack.selectedIndex = index;

}

这会起作用，尽管我不确定这是否是您的想法。

Answer 2

当您将 ActionScript 从 mxml 类中取出时，您就将其超出了范围。
在包含此代码的函数中，

myViewStack.selectedIndex = index;

您试图在不存在的类文件中引用 myViewStack 。

myViewStack.selectedIndex = index;

与 this 引用该方法所在的类是一样的

this.myViewStack.selectedIndex = index;

。

在包含 changeView 方法的类中，您需要创建一个名为 myViewStack 的公共变量。
然后在 mxml 中实例化该类后，您需要分配 myViewStack

var myClass:MyClassWithchangeView = new MyClassWithchangeView ( );
myClass.myViewStack = viewStackSource;