在我们编写QML应用的时候,我们有时事先需要来考虑我们怎么使用一个好的框架来完成我们的应用。我们的应用有多少个页面,页面之间的导航到底是怎么样子的。这个对于我们一开始来设计我们的应用来说非常中要。在这篇文章中,我们来介绍如何在上层来设计我们的应用框架。
1)使用tab来创建一个平面的导航应用
我们可以使用我们的Ubuntu SDK来创建一个最基本的叫做TabApp的应用:
这样我们就生成了我们的一个最基本的应用。我们把应用的宽度和高度设为如下的值:
width: units.gu(50)
height: units.gu(75)
同时,我们也修改我们的Main.qml如下:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "tabapp.ubuntu"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(50)
height: units.gu(75)
Tabs {
id: tabs
Tab1 {
objectName: "Tab1"
}
Tab2 {
objectName: "Tab2"
}
}
}
在这里我们定义了两个Tab页面,分别为Tab1及Tab2。它们的内容分别为:
import QtQuick 2.0
import Ubuntu.Components 1.1
Tab {
title: i18n.tr("Tab 1")
Action {
id: reloadAction
text: "Reload"
iconName: "reload"
onTriggered: {
console.log("reload is clicked")
}
}
page: Page {
Label {
anchors.centerIn: parent
text: i18n.tr("This is page one")
}
tools: ToolbarItems {
ToolbarButton {
action: reloadAction
}
}
}
}
import QtQuick 2.0
import Ubuntu.Components 1.1
Tab {
title: i18n.tr("Tab 2")
page: Page {
Label {
anchors.centerIn: parent
text: i18n.tr("This is page two")
}
}
}
这是一个最简单的Tab导航应用。我们在手机上运行:
所有的源码可以在地址下载:
我们也可以把我们的Main.qml修改如下:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "tabapp.ubuntu"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(50)
height: units.gu(75)
Action {
id: reloadAction
text: "Reload"
iconName: "reload"
onTriggered: {
console.log("reload is clicked")
}
}
Tabs {
id: tabs
Tab {
title: i18n.tr("Simple page")
page: Page {
Label {
id: label
anchors.centerIn: parent
text: "A centered label"
}
tools: ToolbarItems {
ToolbarButton {
action: reloadAction
}
}
}
}
Tab {
id: externalTab
title: i18n.tr("External")
page: Loader {
id: loader
anchors.fill: parent
source: (tabs.selectedTab === externalTab) ? Qt.resolvedUrl("ExternalPage.qml") : ""
onLoaded: {
console.log( loader.source + " is loaded")
}
}
}
Tab {
title: i18n.tr("List view")
page: Page {
ListView {
clip: true
anchors.fill: parent
model: 20
delegate: ListItem.Standard {
iconName: "compose"
text: "Item "+modelData
}
}
}
}
}
}
运行我们的应用:
所有的源码在:
我们如果想在Tab架构中使用pagestack的话,我们对我们的应用必须做一些修改。我们只能把Tabs作为第一个页面推到PageStack的栈中。Main.qml具体实现如下:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "tabapp.ubuntu"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(50)
height: units.gu(75)
Action {
id: reloadAction
text: "Reload"
iconName: "reload"
onTriggered: {
console.log("reload is clicked")
}
}
PageStack {
id: pageStack
Component.onCompleted: push(tabs)
Tabs {
id: tabs
Tab {
title: "Tab 1"
page: Page {
Button {
anchors.centerIn: parent
onClicked: pageStack.push(page3)
text: "Press"
}
}
}
Tab {
title: "Tab 2"
page: Page {
Label {
anchors.centerIn: parent
text: "Use header to navigate between tabs"
}
}
}
}
Page {
id: page3
visible: false
title: "Page on stack"
Label {
anchors.centerIn: parent
text: "Press back to return to the tabs"
}
}
}
}
运行我们的应用,我们可以看到:
我们可以看见在上面显示的那样,有一个叫做“Page on stack”。可以通过按下换回箭头回到上一个页面。
具体的代码:
2)使用PageStack来导航
在这一节中,我们将介绍如何使用PageStack来管理我们的页面。当用户进入下一个页面完成自己的工作后,可以通过按下标题栏中的返回箭头回到上一个页面。按照上面同样的步骤,我们可以创建一个叫做PageStack的项目。Main.qml的设计如下:
import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.ListItems 1.0 as ListItem
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "pagestack.ubuntu"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: units.gu(50)
height: units.gu(75)
PageStack {
id: pageStack
Component.onCompleted: {
push(page0)
}
Page {
id: page0
title: i18n.tr("Root page")
visible: false
Column {
anchors.fill: parent
ListItem.Standard {
text: i18n.tr("Page one")
onClicked: pageStack.push(page1, {color: UbuntuColors.orange})
progression: true
}
ListItem.Standard {
text: i18n.tr("Page two")
onClicked: pageStack.push(Qt.resolvedUrl("Page2.qml"))
progression: true
}
}
}
Page {
title: "Rectangle"
id: page1
visible: false
property alias color: rectangle.color
Rectangle {
id: rectangle
anchors {
fill: parent
margins: units.gu(5)
}
}
}
}
}
这里我们在应用启动时创建一个PageStack,并同时把“page0”压入栈中。使它成为第一个页面。在“page0”中,我们有有两个列表项,分别可以进入到下一个页面中。
运行我们的应用:
我们可以在每个页面看见有个返回的箭头。
整个项目的源码在: