如何在火花列表控件中导航？答案

【问题标题】：how to navigate in spark list control?如何在火花列表控件中导航？
【发布时间】：2011-08-22 20:14:52
【问题描述】：

我正在使用火花列表控件构建一个移动应用程序。当用户点击列表项时，我希望它导航到该通信页面

<s:List id="list" width="100%" height="100%" labelField=" label">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Page One" />
<fx:Object label="Page Two" />
<fx:Object label="Page Three" />
<fx:Object label="Page Four" />
</s:ArrayList>
</s:dataProvider>
</s:List>

我如何对其进行编码，以便当用户点击项目标签 =“第一页”时，它将导航到 PageOneView.mxml，如果点击“第二页”，它将转到 PageTwoView.mxml 等等。谢谢

【问题讨论】：

标签： apache-flex flex4 flexbuilder flex4.5

【解决方案1】：

List 应该发送一个 change 事件。在该更改事件处理程序中，您可以将新视图推送到视图堆栈：

if(list.selectedIndex == 0){
 navigator.pushView(viewOne);
} else if (list.selectedIndex == 1){
 navigator.pushView(viewtwo);
} else if 
etc...

【讨论】：

感谢您的回复，如果我使用 loop 而不是 If...else 会更好吗？
@jameslcs 我不确定您将如何使用循环，但这取决于您的数据结构。如果您的 dataProvider 中的对象具有对您希望它们在单击时实例化的视图或视图类的引用，那就更好了。
我正在考虑获取数组列表的长度并循环遍历它，例如。 PageView01 = 索引 0，PageView02 = 索引 1，依此类推。那么我不需要使用很多 else if，当这些页面开始加起来时。
@jameslcs 你不能只使用 selectedIndex 属性动态创建视图名称吗？我仍然认为循环不是一个好方法。

【解决方案2】：

我喜欢这里的 switch 语句，因为你可以默认为一个动作，

<?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="HomeView">
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;

            protected function list_changeHandler(event:IndexChangeEvent):void
            {
                switch(list.selectedItem.label)
                {
                    case "Page One":
                    {
                        navigator.pushView(pageOne);
                        break;
                    }
                    case "Page Two":
                    {
                        navigator.pushView(pageTwo);
                        break;
                    }                   
                    case "Page Three":
                    {
                        navigator.pushView(pageThree);
                        break;
                    }                   
                    case "Page Four":
                    {
                        navigator.pushView(pageFour);
                        break;
                    }                       
                    default:
                    {
                        navigator.pushView(pageOne);
                        break;
                    }
                }
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:List id="list" width="100%" height="100%" change="list_changeHandler(event)"
            labelField="label">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Page One"/>
                <fx:Object label="Page Two"/>
                <fx:Object label="Page Three"/>
                <fx:Object label="Page Four"/>
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
</s:View>

只是一种不同的方式，符合我的逻辑，在 Flash Builder 4.6 中创建。

杰克

【讨论】：