0

我正在使用 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)。但我可能会离开这里，所以任何帮助将不胜感激。

干杯，

4

1 回答 1

0

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

主要.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>

左视图.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。希望这能有所帮助。

于 2012-05-10T14:16:29.943 回答