Flex - 使用字符串值绑定 ViewStack selectedChild 属性答案

【问题标题】：Flex - Binding ViewStack selectedChild Property Using a String ValueFlex - 使用字符串值绑定 ViewStack selectedChild 属性
【发布时间】：2010-09-24 00:42:52
【问题描述】：

附加的代码示例（伪代码）编译，但抛出此运行时错误：

TypeError: Error #2007: Parameter child must be non-null.
    at flash.display::DisplayObjectContainer/getChildIndex()
    at mx.core::Container/getChildIndex()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2409]
    at mx.containers::ViewStack/set selectedChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\ViewStack.as:557]


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var targetViewName:String = "content";
        ]]>
    </mx:Script>

    <mx:ViewStack id="viewStack" width="100%" height="100%" 
        selectedChild="{Container(viewStack.getChildByName(targetViewName))}">
        <mx:Panel id="welcome" width="100%" height="100%" />

        <mx:Panel id="content" width="100%" height="100%" />
    </mx:ViewStack>
</mx:Application>

有没有什么方法可以让它工作而不必调用函数来设置 selectedChild？

谢谢。

【问题讨论】：

标签： apache-flex data-binding actionscript binding

【解决方案1】：

当 selectedChild 被触发时，viewStack 没有添加任何子元素，因此它会抛出 NullPointerException：

以下将起作用：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.core.Container;
            [Bindable]
            private var targetViewName:String = "content";

            private function onClick() : void
            {
                viewStack.selectedChild = Container(viewStack.getChildByName(targetViewName)) ;
            }
        ]]>
    </mx:Script>

    <mx:ViewStack id="viewStack" width="100%" height="100%" >
        <mx:Panel id="welcome" width="100%" height="100%"  title="welcome"/>

        <mx:Panel id="content" width="100%" height="100%" title="content" />
    </mx:ViewStack>

    <mx:Button click="onClick()" label="click" />

</mx:Application>

【讨论】：

【解决方案2】：

试过这个：

selectedChild="{this[targetViewName]}">

/尼尔斯

【讨论】：

【解决方案3】：

抱歉，/Niels，这不起作用。尝试编译这段代码，你会看到 selectedChild 没有改变（你也会收到编译警告）：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var targetViewName:String = "content";
        ]]>
    </mx:Script>

    <mx:TabNavigator id="viewStack" width="100%" height="100%" creationPolicy="all" 
        selectedChild="{this[targetViewName]}">
        <mx:Panel id="welcome" width="100%" height="100%" label="welcome" />

        <mx:Panel id="content" width="100%" height="100%" label="content" />
    </mx:TabNavigator>
</mx:Application>

【讨论】：

【解决方案4】：

我的猜测是这不起作用，因为绑定将在初始化时评估，此时视图堆栈的子级尚未创建。即使将 creationPolicy 设置为“all”，问题仍然存在。

在创建视图堆栈（可能还有它的子级）时，您必须设置与 targetViewName 的绑定。

【讨论】：

【解决方案5】：

一旦目标在显示列表中，您想设置 selectedChild 属性。试试这个：

<mx:TabNavigator id="viewStack" width="100%" height="100%" creationPolicy="all" >
    <mx:Panel id="welcome" width="100%" height="100%" label="welcome" />

    <mx:Panel id="content" width="100%" height="100%" label="content" addedToStage="viewStack.selectedChild = this" />
</mx:TabNavigator>

如果您真的想绑定 selectedChild，则创建一个可绑定函数，该函数返回您要选择的面板，但前提是它是 viewStack 的子项。

【讨论】：

【解决方案6】：

<mx:Script>
    <![CDATA[
        import models.ModelLocator;

        [Bindable]
        private var model:ModelLocator = ModelLocator.getInstance();
    ]]>
</mx:Script>

<mx:ViewStack id="videoViewStack" width="100%" height="100%" selectedChild="{this[model._videoViewStack]}" >
    <viewsVideos:AllVideos id="AllVideos" label="Videos"/>
    <viewsVideos:MainVideo id="MainVideo" label="Video"/>
</mx:ViewStack>

这绑定了一个字符串 var 我确实收到了警告，但它可以工作

【讨论】：