在N9使用TabGround进行页面导航（01）

在为N9开发应用时，页面导航成为初学者最为头疼的事情。

下面我为大家介绍一下TabFGround的页面导航。

先上效果图

将一个ToolBar置顶，ToolBar里存放着三个Tab按钮

ToolBar下方有个TabGround，存放着三个Page



参考《《某文章》》进行创建一个N9的qtquick工程

/*main.qml*/

import QtQuick 1.1
import com.nokia.meego 1.0
PageStackWindow {
    id: appWindow
    showStatusBar:false
initialPage:test

    TestPage {
        id:test
    }
}

/*TestPage.qml*/

import QtQuick 1.1
import com.nokia.meego 1.0
PageStack {
    ToolBar {
        id: topToolBar
        anchors {
            left: parent.left;
            right: parent.right;
            top: parent.top
        }
        tools: ToolBarLayout {
            id: tabBarLayout
            anchors {
                left: parent.left;
                right: parent.right;
            }
            ButtonRow {
                TabButton { tab: tab1; text: qsTr("Tab 1") }
                TabButton { tab: tab2; text: qsTr("Tab 2") }
                TabButton { tab: tab3; text: qsTr("Tab 3") }
            }
        }
    }
    TabGroup {
        id: tabGroup
        currentTab: tab1
        anchors.top: topToolBar.bottom
        Page {
            id: tab1
            Text {
                text: "This is a single page1"
            }
        }
        Page {
            id: tab2
            Text {
                text: "This is a single page2"
            }
        }
        Page {
            id: tab3
            Text {
                text: "This is a single page3"
            }
        }
    }
}

现在解释下上述代码

在TestPage.qml文件中，我们使用PageStack作为顶级控件，在main.qml中使用PageStackWindow来管理PageStack。

在TestPage.qml文件中，我们使用ToolBar的tools来装载一个ToolBarLayout，ToolBarLayout中使用ButtonRow来布三个TabButton。然后我们将ToolBar的錨（anchor）对齐parent的top。

TabGround的top对齐ToolBar的bottom。

在TabGround有三个Page，他们是TabGround的子项目。

在三个TabButton中，有个tab属性，这里填写TabGround中对应三个Page的id。

每点击TabButton，都会让TabGround的currentTab变更为对应的Page。

注：TabGround中的currentTab属性，存放的是当前TabGround显示的控件的id。