如何使用 SplitView Navigation Flex 4.6 更改右侧视图的视图

Question

我正在使用 Flex 4.6 创建一个移动应用程序，并且我正在使用带有选项卡式应用程序的 SplitViewNavigator。我有一个永远不会改变的左视图，它有一个与之关联的静态列表。我对SplitViewNavigator 的右侧面板有多个视图。我可以加载左视图和第一个右视图，但不知道在从左视图的列表中进行选择后如何更改右视图的视图。

我的主应用程序文件有以下代码来加载拆分视图并显示左视图和右视图。

<s:SplitViewNavigator id="svn" width="100%" height="100%">
    <s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"/>
    <s:ViewNavigator id="rightNav" width="70%" height="100%" firstView="views.RightView1"/>
</s:SplitViewNavigator>

我的左视图只有一个简单的列表，我可以确定选择了哪个项目，但我不知道如何更改右视图。假设右视图只是称为 RightView1、RightView2 等。

我假设我需要使用 pushView 方法，但不知道如何从 leftView 视图引用主应用程序文件中的右视图 ID (rightNav)。但我可能会离开这里，所以任何帮助都将不胜感激。

干杯，

Answer 1

你可以尝试做这样的事情：

Main.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  applicationDPI="160"
                                  creationComplete="this_creationCompleteHandler(event)"
                                  >
    <fx:Script>
        <![CDATA[
            import events.ViewEvent;

            import mx.events.FlexEvent;

            import views.RightView1;

            protected function this_creationCompleteHandler(event:FlexEvent):void
            {
                leftNav.addEventListener(ViewEvent.CHANGE_VIEW, leftNav_changeViewHandler);
            }

            protected function leftNav_changeViewHandler(event:ViewEvent):void
            {
                rightNav.pushView(event.view);
            }

        ]]>
    </fx:Script>

    <s:SplitViewNavigator id="svn" width="100%" height="100%">
        <s:ViewNavigator id="leftNav" width="30%" height="100%" firstView="views.LeftView"  />
        <s:ViewNavigator id="rightNav" width="70%" height="100%" firstView="views.RightView1"/>
    </s:SplitViewNavigator>
</s:TabbedViewNavigatorApplication>

LeftView.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="LeftView">

    <fx:Script>
        <![CDATA[
            import events.ViewEvent;

            import mx.collections.ArrayCollection;

            import spark.events.IndexChangeEvent;

            private function labelFunc(item:Object):String
            {
                return getQualifiedClassName(item).split("::")[1];
            }

            protected function list_changeHandler(event:IndexChangeEvent):void
            {
                dispatchEvent(new ViewEvent(ViewEvent.CHANGE_VIEW, list.selectedItem as Class, true));
            }

        ]]>
    </fx:Script>
    <s:List id="list" height="100%" width="100%"
            dataProvider="{new ArrayCollection([RightView1, RightView2, RightView3])}"
            labelFunction="labelFunc"
            change="list_changeHandler(event)">

    </s:List>
</s:View>

ViewEvent.as：

package events
{
    import flash.events.Event;

    public class ViewEvent extends Event
    {

        public static const CHANGE_VIEW:String = "changeView";

        public function ViewEvent(type:String, view:Class, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);

            this.view = view;
        }

        public var view:Class;

        override public function clone():Event
        {
            return new ViewEvent(type, view, bubbles, cancelable);
        }
    }
}

这对我有用，但我不喜欢this_creationCompleteHandler 参与Main.mxml，如何捕捉ViewEvent 取决于您。希望这能有所帮助。