跨平台C++图形开发框架Qt教程：如何创建你第一个系统UI_qt c++ ui

​Qt（发音为“ cute”，而不是“ cu-tee”）是一个跨平台框架，通常用作图形工具包，它不仅创建CLI应用程序中也非常有用。而且它也可以在三种主要的台式机操作系统以及移动操作系统（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式设备，Android（Necessitas）和iOS的端口上运行。现在我们为你提供了免费的试用版。前往慧都网搜索Qt免费下载使用吧！

了解如何编写您的第一个系统UI。

这个例子展示了一个非常简单的System UI实现，展示了Qt Application Manager的基本构建块。

应用程序的图标和名称在左侧。您可以单击它们各自的图标来启动和停止它们。右侧的列布局显示其窗口。

应用程序在特定颜色的背景下显示“ Hello World！”。

文件和文件夹结构
此示例包括四个单独的QML应用程序：一个系统UI和三个示例应用程序：“ Hello Red”，“ Hello Green”和“ Hello Blue”。System UI也是QML应用程序，尽管它是一个特殊的应用程序。

每个应用程序都放在一个单独的目录中，如下所示：

system-ui.qml
apps
hello-world.blue
icon.png
info.yaml
main.qml
hello-world.red
icon.png
info.yaml
main.qml
hello-world.green
icon.png
info.yaml
main.qml
每个应用程序都有一个main.qml文件，一个图标和一个info.yaml。此YAML文件包含应用程序元数据，例如应用程序名称，其图标文件名等。

运行系统界面
验证appman路径中是否包含二进制文件。否则，appman在使用二进制文件时，必须明确指定其位置。

如果您的appman的路径中有二进制文件，则可以按以下方式运行系统用户界面：

examples/applicationmanager/hello-world$ appman --builtin-apps-manifest-dir ./apps system-ui.qml
1

该–builtin-apps-manifest-dir命令行参数告诉appman在哪里查找bult，在应用中这种情况下apps的子目录内置应用程序是预先安装的应用程序，无法通过ApplicationInstaller API 删除。下一个参数是系统用户界面的main.qml文件名system-ui.qml。

你可以看到下面的屏幕截图：

有关命令行选项的更多信息，请运行appman --help。

实施系统界面
像任何简单的QML应用程序一样，我们的示例代码以一些导入开始，并在根目录处添加一个普通Item。唯一的区别是我们的系统用户界面还导入了QtApplicationManager.SystemUI模块

QtQuick。



import QtQuick 2.4
import QtApplicationManager.SystemUI 2.0

Item {
    width: 800
    height: 600
1
2
3
4
5
6
7
8
9
10

接下来，在根项目的左侧有一个列，在其中放置可用应用程序的图标及其名称。

   // Show application names and icons
    Column {
        spacing: 20
        Repeater {
            model: ApplicationManager
            Column {
                Image {
                    source: model.icon
                    MouseArea {
                        anchors.fill: parent
                        onClicked: model.isRunning ? application.stop() : application.start()
                    }
                }
                Text {
                    font.pixelSize: 20
                    text: model.name
                }
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

我们使用ApplicationManager单例作为模型，为每个可用的应用程序提供一行。在每一行中，我们有：

icon具有图标URL 值
name具有本地化应用程序名称的作用
isRunning提供应用程序状态的布尔值
application包含其ApplicationObject值
单击图标可启动其应用程序，或者如果它已经在运行，则将其停止。

接下来，我们将Column锚点放置在root的右侧Item。在本专栏中，我们为当前正在运行的所有应用程序布置现有窗口：

 // Show windows
    Column {
        anchors.right: parent.right
        Repeater {
            model: WindowManager
            WindowItem {
                width: 600
                height: 200
                window: model.window
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

这次，我们使用WindowManager单例作为模型。每个窗口一排，每排中包括WindowObject。

为了有一个窗口在我们的系统UI中渲染，我们必须指定其WindowObject到WindowItem，象我们上面那样。默认情况下，调整窗口大小以匹配呈现它的WindowItem的大小。

实施申请
下面我们将实现在彩色背景下的文本我们的Hello World应用程序显示一个“ Hello World！”。

import QtQuick 2.4 QtQuick 2.4
import QtApplicationManager.Application 2.0import QtApplicationManager.Application 2.0

ApplicationManagerWindow {
    {
    color:  "blue"

    Text {
        {
        anchors.centerIn: centerIn: parent
        text:  "Hello World!"
    }}
}}
1
2
3
4
5
6
7
8
9
10
11
12
13

此示例与纯QML应用程序之间的唯一区别是，根元素是模块提供的ApplicationManagerWindowQtApplicationManager.Application。

应用元数据
该info.yaml文件包含有关应用程序的元数据。它以一些描述此文件包含Qt Application Manager应用程序元数据的样板开始。

formatVersion: 1: 1
formatType: am-application: am-application
1
2

---

然后是应用程序ID，用于唯一标识应用程序。建议遵循反向DNS方案，但不强制执行。这是“ Hello World”示例UI中的“ Blue”应用程序。

id:      'hello-world.blue':      'hello-world.blue'
1

然后是图标文件名：

icon:    'icon.png':    'icon.png'
1

该code字段指定应用程序的入口点。对于QML应用程序，这意味着其主要QML文件的文件名。

code:    'main.qml':    'main.qml'
1

该runtime字段指定应用程序使用的运行时。在此示例中，所有应用程序均以QML编写，因此我们使用’qml’运行时。'native’例如，另一个运行时用于已编译的可执行应用程序，其中该code条目将指向其二进制可执行文件名。

runtime: 'qml': 'qml'
1

最后是各种语言的应用程序的用户可见名称。对于此示例，我们仅提供英语：

name::
  en: 'Hello Blue': 'Hello Blue'
1
2

本篇文章中的内容你都学会了吗？如果这篇文章没能满足你的需求、前往慧都网搜索Qt获取更多文章教程！现在立刻前往慧都网下载Qt免费试用吧！更多Qt类开发工具QtitanRibbon、QtitanChart、QtitanNavigation、QtitanDocking、QtitanDataGrid在线订购现直降1000元。