在我们编写QML应用的时候，我们有时事先需要来考虑我们怎么使用一个好的框架来完成我们的应用。我们的应用有多少个页面，页面之间的导航到底是怎么样子的。这个对于我们一开始来设计我们的应用来说非常中要。在这篇文章中，我们来介绍如何在上层来设计我们的应用框架。
width: units.gu(50)
height: units.gu(75)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"
}
}
}
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")
}
}
}
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
}
}
}
}
}
}
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"
}
}
}
}
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)
}
}
}
}
}
原文：http://blog.csdn.net/ubuntutouch/article/details/44617369