在为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。