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

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

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

先上效果图

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

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

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

/*main.qml*/

import QtQuick 1.1import com.nokia.meego 1.0PageStackWindow {    id: appWindow    showStatusBar:falseinitialPage:test    TestPage {        id:test    }}

/*TestPage.qml*/

import QtQuick 1.1import com.nokia.meego 1.0PageStack {    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。