Question

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

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

<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部分，这取决于你如何抓住{{1}}。希望这可以提供帮助。

如何使用listView Navigation Flex 4.6更改右视图上的视图

1 个答案: