QML编程开发【一】_qt qml界面开发

目录

序

什么是QML

什么是Qt Quick

QML的第一步

创建一个QML文档

导入和使用QtQuick模块

定义对象层次结构

创建Qt Quick 项目

创建一个空的Qt Quick 应用程序

---

序

        接触Qt开发框架也有一段时间了，一直没有用QML进行过任何开发，打算开始深入学习一波这方面的东西，记录我在学习中的一些笔记，最后逐渐将自己以前做过的一些项目用QML重写实现一遍，毕竟QML是Qt现在力推的编程语言和用户界面规范。

什么是QML

        QML是一种用户界面规范和编程语言。它允许开发人员和设计人员创建高性能、流畅的动画和具有视觉吸引力的应用程序。QML提供了高度可读的、声明式的、类似json的语法，支持命令式JavaScript表达式和动态属性绑定。QML语言和引擎基础结构是由Qt QML模块提供。QML是一种声明性语言，它允许根据用户界面的可视组件以及它们之间的交互和关系来描述用户界面。它是一种高度可读的语言，其设计目的是使组件能够以动态方式互连，并且允许在用户界面中轻松地重用和定制组件。使用QtQuick模块，设计人员和开发人员可以轻松地在QML中构建流畅的动画用户界面，并可以将这些用户界面连接到任何后端c++库。

什么是Qt Quick

        Qt Quick是QML类型和功能的标准库。它包括视觉类型，交互类型，动画，模型和视图，粒子效果和着色效果。QML应用程序开发人员可以通过一条import语句访问所有这些功能。QtQuick QML库由QtQuick模块提供。为了创建或定制图形用户界面，Qt Quick除了Qt QML中的标准QML类型外，还添加了可视类型、动画类型和其他QML类型。QtQuick Designer是集成在Qt Creator中的，并且在Qt Creator 2.7版本以后就支持QtQuick 2了。

QML的第一步

创建一个QML文档

        QML文档使用高度可读的结构化布局定义对象的层次结构。每个QML文档由两部分组成：导入部分和对象声明部分。用户界        面最常见的类型和功能在QtQuick import中提供。

导入和使用QtQuick模块

        要使用Qt Quick模块，需要导入QML文档。导入语法是这样的：

import QtQuick 2.3

        这样，Qt Quick提供的类型和功能就可以在QML文档中使用了。

定义对象层次结构

        QML文档中的对象声明定义了可视场景中显示的内容。Qt Quick提供了所有用户界面的基本构建块，例如用于显示图像和文本以及处理用户输入的对象。一个简单的对象声明可以是一个有颜色的矩形，中间有一些文本：

Rectangle {
      width: 200
      height: 100
      color: "red"
 
      Text {
          anchors.centerIn: parent
          text: "Hello, World!"
      }
}

        上面定义了一个带有根矩形对象的对象层次结构，根矩形对象有一个子文本对象。文本对象的父对象被自动设置为矩形，类似地，文本对象被QML添加到矩形对象的子属性中。上面示例中使用的矩形和文本类型都是由QtQuick导入提供的。把导入和对象声明放在一起，我们得到了一个完整的QML文档：

import QtQuick 2.3
 
Rectangle {
      width: 200
      height: 100
      color: "red"
 
      Text {
          anchors.centerIn: parent
          text: "Hello, World!"
      }
}

如果我们把这个文档保存为“HelloWorld.qml”，我们就可以加载和显示它了。

打开Qt5.13.2的Qt Creator，创建一个Qt Quick 应用程序的空项目：

        在main.qml文件中的内容，将之前创建的代码复制到文件中，按绿色运行按钮运行应用程序。可以看到文字“你好，世界!”在一个红色矩形的中心：

第一个QML应用程序创建并运行成功。

创建Qt Quick 项目

当我们从头创建一个新的Qt Quick项目时，我们有以下选项:

• Qt Quick Application - Empty 创建一个Qt Quick 2应用程序项目，它可以包含QML和c++代码。我们可以构建应用程序并将其部署到桌面、嵌入式和移动目标平台。
• Qt Quick Application-Scroll 使用ScrollView类型来实现可滚动列表视图(需要Qt 5.9或更高版本)。
• Qt Quick Application - Stack 使用StackView类型来实现一组带有基于堆栈的导航模型的页面(需要Qt 5.7或更高版本)。
• Qt Quick Application - Swipe 使用SwipeView类型实现一组页面与基于滑动的导航模型(要求Qt 5.7或更高)。
• Qt Quick UI Prototype (在其他项目类别中)使用一个包含主视图的QML文件创建Qt Quick UI项目。我们可以在QML场景预览工具中查看Qt Quick 2 UI项目。我们不需要构建它们，因为它们不包含任何c++代码。只有在原型设计时才使用它。我们不能用它创建完整的应用程序。
• Qt Quick UI 项目不能部署到嵌入式或移动目标平台。对于这些平台，应该创建一个Qt Quick应用程序。
• Qt Quick 2 扩展插件(在库类中)创建c++插件，使其能够提供可动态加载到Qt Quick 2应用程序中的扩展。

创建一个空的Qt Quick 应用程序

1. 选择 New File or Project > Application > Qt Quick Application - Empty > Choose。
2. 在Name字段中，输入应用程序的名称。
3. 在Create字段中，输入项目文件的路径，然后选择Next(或在macOS上继续)。
4. 在Build system字段中，选择用于构建和运行项目的构建系统:qmake、CMake或Qbs。
5. 选择Next。
6. 在Minimal required Qt version字段中选择要开发的Qt版本。Qt版本确定了QML文件中导入使用的Qt Quick模块 。
7. 选择“Use Qt Virtual Keyboard”复选框以向应用程序添加对Qt虚拟键盘的支持。注意：如果我们在安装Qt时还没有安装Qt虚拟键盘模块，当我们试图打开主模块时将出现一条错误消息。设计模式下的表单编辑器中的qml。我们可以使用Qt维护工具来安装Qt虚拟键盘。
8. 选择Next。
9. 在Language字段中，选择我们计划将应用程序翻译成的语言。稍后可以通过编辑项目文件添加其他语言。
10. 在Translation file 字段中，我们可以编辑将为所选语言生成的翻译源文件的名称。
11. 选择Next。
12. 选择用于运行和构建项目的Kits，然后单击Next。注意：如果Kits已在Tools > Options > Kits中指定，会列出它们。
13. 查看项目设置，然后单击Finish(在Windows和Linux上)或Done(在macOS上)来创建项目。

Qt Creator生成的一个QML文件“main.qml” ，是可以在设计模式中修改的。

---

小结

        使用QML编写应用程序还是很快的。高度可读的结构化布局定义对象的层次结构有点类似python的缩进规范，代码简洁分明，清晰。后续开始学习使用QML控件创建应用程序。