Ubuntu OS上的QML应用框架

来源：互联网发布：unity3d骨骼动画教程编辑：程序博客网时间：2024/05/16 01:52

在我们编写QML应用的时候，我们有时事先需要来考虑我们怎么使用一个好的框架来完成我们的应用。我们的应用有多少个页面，页面之间的导航到底是怎么样子的。这个对于我们一开始来设计我们的应用来说非常中要。在这篇文章中，我们来介绍如何在上层来设计我们的应用框架。

１）使用tab来创建一个平面的导航应用

我们可以使用我们的Ubuntu SDK来创建一个最基本的叫做TabApp的应用：

这样我们就生成了我们的一个最基本的应用。我们把应用的宽度和高度设为如下的值：

    width: units.gu(50)    height: units.gu(75)

同时，我们也修改我们的Main.qml如下：

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // 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.0import Ubuntu.Components 1.1Tab {    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.0import Ubuntu.Components 1.1Tab {    title: i18n.tr("Tab 2")    page: Page {        Label {            anchors.centerIn: parent            text: i18n.tr("This is page two")        }    }}

这是一个最简单的Tab导航应用。我们在手机上运行：

所有的源码可以在地址下载：

https://github.com/liu-xiao-guo/TabApp1

我们也可以把我们的Main.qml修改如下：

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // 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                    }                }            }        }    }}

运行我们的应用：

所有的源码在：

https://github.com/liu-xiao-guo/TabApp4

我们如果想在Tab架构中使用pagestack的话，我们对我们的应用必须做一些修改。我们只能把Tabs作为第一个页面推到PageStack的栈中。Main.qml具体实现如下：

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // 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”。可以通过按下换回箭头回到上一个页面。

具体的代码：

https://github.com/liu-xiao-guo/TabApp3

2）使用PageStack来导航

在这一节中，我们将介绍如何使用PageStack来管理我们的页面。当用户进入下一个页面完成自己的工作后，可以通过按下标题栏中的返回箭头回到上一个页面。按照上面同样的步骤，我们可以创建一个叫做PageStack的项目。Main.qml的设计如下：

import QtQuick 2.0import Ubuntu.Components 1.1import 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”中，我们有有两个列表项，分别可以进入到下一个页面中。

运行我们的应用：

我们可以在每个页面看见有个返回的箭头。

整个项目的源码在：

https://github.com/liu-xiao-guo/PageStack

0 0