Ubuntu OS上的QML应用框架
在我们编写QML应用的时候,我们有时事先需要来考虑我们怎么使用一个好的框架来完成我们的应用。我们的应用有多少个页面,页面之间的导航到底是怎么样子的。这个对于我们一开始来设计我们的应用来说非常中要。在这篇文章中,我们来介绍如何在上层来设计我们的应用框架。
1)使用tab来创建一个平面的导航应用
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导航应用。我们在手机上运行:
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" } } } }
运行我们的应用,我们可以看到:
2)使用PageStack来导航
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) } } } } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。