在 flex mobile 4.5 的选项卡式视图导航器应用程序中，我如何才能拥有一个不属于主选项卡式应用程序的主页选项卡？

Question

我是 flex 新手，我正在为移动设备构建应用程序。

我有一个选项卡式视图导航器应用程序，它的底部有选项卡。

在顶部，我有一个带返回的操作栏，还有一些其他按钮尚未设置。

我创建了一个主页选项卡，因为我希望在启动屏幕之后的第一个视图有一个主页，然后使用指南说选择下面的特定选项卡，问题是我不想拥有主页选项卡在底部。

有没有办法将主页保留为第一个视图，但不将其作为底部选项卡的一部分？

Answer 1

简单来说：

1. 将 IndexChangeEvent 侦听器添加到您的 TabbedViewNavigator 实例 [http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/events/IndexChangeEvent.html]

2. 当索引更改或正在更改时，检查 tabbedViewNavigatorInstance.navigators[newIndex] firstView 是否等于 Home。

3. 如果是主页，则隐藏主页选项卡，否则显示主页选项卡，对于此任务，请查看此帖子 [Hiding a tab in a Spark TabBar]

实现本身可以根据您当前的流程以多种方式完成。

这里有一个简单的例子：

<?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" applicationComplete="onAppComplete(event)">

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import spark.components.DataGroup;
            import spark.events.IndexChangeEvent;

            import views.HomeView;

            private function onAppComplete(e : Event) : void {
                this.tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE, onIndexChange);

                showHomeTab(false);
            }

            private function onIndexChange(e : IndexChangeEvent) : void {
                var vn : ViewNavigator = this.navigators[e.newIndex] as ViewNavigator;

                if(vn.firstView === HomeView){
                    showHomeTab(false);
                } else {
                    showHomeTab(true);
                }
            }

            private function showHomeTab(state : Boolean) : void {
                var dg : DataGroup = this.tabbedNavigator.tabBar.dataGroup;

                ///if HomeView is at index 0
                dg.getElementAt(0).visible = state;
                dg.getElementAt(0).includeInLayout = state;
            }
        ]]>
    </fx:Script>

    <s:ViewNavigator label="Home" width="100%" height="100%" firstView="views.HomeView"/>
    <s:ViewNavigator label="Other" width="100%" height="100%" firstView="views.OtherView"/>

</s:TabbedViewNavigatorApplication>