Y03977211367Y的博客

ApplicationWindow在上一章中，我们介绍了Qt Quick中常用的基础组件，它们都属于QtQuick模块。从Qt5.7开始，Qt Quick引入了Qt Quick Controls模块，该模块提供了一组控件，用于在Qt Quick中构建完整的用户界面。如Button、CheckBox、ComboBox、Dialog、ProgressBar等等。想要在QML中使用该模块，需要在文件中声明：import QtQuick.Controls。与QtQuick模块中的Window类型类似，Qt

MouseArea继承于Item且本身不可见，它通常与可见组件结合使用，以便为指定的组件提供鼠标操作的功能。尽管MouseArea拥有visible属性，不过该属性与组件是否可见并没有关系。当visible属性值为false时，表示忽略该鼠标区域的鼠标事件，类似enabled属性设置为false。

`Item`是Qt Quick中所有可视组件的基本类型，Qt Quick中的所有可视组件都继承于`Item`。尽管`Item`本身不可见，但它定义了所有可视组件的通用属性，如坐标、宽高、锚定关系、事件处理等等。

TextEdit组件与TextInput类似，不过它支持用户输入多行文本，甚至可以通过textFormat属性支持富文本或者Markdown格式的文本内容。

TextInput组件用于显示一个可输入的单行文本框，并可以通过validator、inputMask或echoMode属性为其设置输入限制，还可以使用font属性设置输入的文本样式，它甚至还支持一些方法，如复制、粘贴、全选等。

Image组件通过source属性显示指定图片的路径，支持位图格式（如jpg和png）和矢量图格式（如svg）。它可以来自于本地文件系统，也可以来自于网络图片。

Text组件用于在场景中显示一串文本，该文本可以指定颜色、字体、大小、样式、对齐方式等一系列属性。

QML提供了很多基础的图形化组件，比如Rectangle、Text、Image、TextInput、TextEdit、Shape等，它们都继承于根组件Item。使用它们需要导入QtQuick模块：import QtQuick。

QML提供了为编写QML应用程序而量身定制的JavaScript环境。此环境不同于浏览器提供的主机环境或服务器端JavaScript环境(如Node.js)。比如它不提供浏览器环境中常见的窗口对象或DOM接口。目前，QML运行时实现了ECMAScript语言规范标准的第七版，即ES7。其实相对于传统的JavaScript，从ES5开始就引入了非常多的实用功能。本节只是简单的介绍一下ES5/ES6/ES7在QML里的常用功能，更多用法请参考ES官方文档。

每个QML对象类型都有一些属性。当创建对象类型的实例时，这些属性就会被自动创建出来。您甚至可以定义一些自己的属性。除枚举属性外，所有属性都以小写字母或下划线开头，并且不能包含字母，数字和下划线以外的字符。

QML默认支持一些基本类型，使用它们时不需要import语句。下面是QML语言提供的基本类型：

作为一个跨平台的框架，Qt需要适应那些不断变化的需求。在Qt5的生命周期内，它已经设法很好地适应了其中的许多要求。然而在Qt5系列中为了保持完整的源代码和二进制兼容性使得某些问题在其生命周期内无法修复。如今有了Qt6便有机会进行更改并重新构建Qt，以适应未来几年的发展。Qt6延续了Qt5系列中所做的工作，因此不会对现有用户造成干扰。Qt6的目标是与Qt5系列有很大程度的兼容性，所以在开发Qt5.14和Qt5.15 LTS版本的时候，就已经将Qt6的一些功能以略微简化的形式引入其中。

QML是一种用户界面标记语言，文件格式以.qml结尾。语法类似CSS，同时支持JavaScript逻辑控制，并且可以与C++进行交互。import在QML文件中可能存在一个或多个导入。导入可以是以下任一项：已注册并具有版本号和命名空间的类型。一个包含类型定义的相对目录。一个JavaScript文件。导入JavaScript文件时必须对其进行限定，以便可以访问它提供的属性和方法。各种导入的通用形式如下： import Namespace VersionMajor.VersionMin

Qt Creator是Qt为应用程序开发人员提供的一个跨平台集成开发环境，可运行于Windows、Linux和MacOS操作系统。使用Qt Creator开发的应用程序可以部署到电脑、嵌入式、移动操作系统或Web浏览器。Qt Creator为应用程序开发人员提供了整个应用程序开发生命周期中所需的各种工具，如管理项目、设计用户界面、编码、构建、运行、测试和调试等。另外，它还为开发人员提供了示例程序、教学课程、帮助文档和Marketplace等。如下图所示：使用Qt Creator创建工程首先，打开Qt

1. 创建一个Qt帐号在浏览器里打开网址https://login.qt.io/register，创建一个Qt帐号。使用该帐号可以登录Qt网站以管理您的许可证，还可以访问Qt的论坛、wiki、bugreports、codereview和支持中心。2. 下载Qt在线安装程序在浏览器里打开网址https://www.qt.io/download，下载Qt在线安装程序(Qt Online Installer)。使用在线安装程序，您可以安装Qt的商业版本或开源版本，开发工具以及其他组件。在线安装程序需要您的Q

QtQt是一种基于C++的跨平台应用程序开发框架。既可以开发GUI应用程序，也可以开发非GUI应用程序。它可以运行在各种软件和硬件平台上，如Windows、Linux、MacOS、Android、iOS、国产操作系统以及嵌入式操作系统等。为全球70多个行业和数百万种设备应用程序提供动力。Qt 历史1990年夏天，挪威程序员Haavard Nord和Eirik Chambe-Eng需要共同开发一个用于超声波图像方面的C++数据库应用程序。该程序必须在Unix，Macintosh和Windows上都能运行

该教程已接近尾声，最后让我们再来讨论一下QML分析器。它是一种用于定位应用程序中性能问题的工具，如速度慢、不响应、界面不流畅等。典型的原因包括在较低的帧率中执行过多的JavaScript。在GUI线程继续之前，所有JavaScript必须返回，如果GUI线程没有准备好，则帧就会延迟或丢弃。导致类似性能问题的另一个典型原因是创建、绘制或更新不可见项，这在GUI线程中也需要花费时间。执行耗时的C++函数，如绘图方法和信号处理程序，在GUI线程中也会花费一些时间，但是QML 分析器很难捕获到它们，因为它不能解

Qt Quick 2使用专用场景图进行渲染。使用场景图而不是传统的命令式绘图系统(QPainter或类似的系统)进行绘图，意味着要渲染的场景可以在帧之间进行保留，并且在开始渲染之前就已经了知道要渲染的完整原语集。也意味着开启了很多的优化空间，比如批量渲染以最小化状态更改和丢弃模糊的原语。假设一个用户界面是包含10个项目的列表，其中每个项目都有一个背景色、一个图标和一个文本。如果使用传统的绘图技术，就需要30次绘制调用和类似数量的状态更改。而如果使用场景图重新组织原语，可以在一次调用中绘制所有背景，然后是所

我们已经多次讨论过如何创建自己的模型来表示QML中的数据，并且在上一节中我们看到了QStandardItemModel的基本示例。通常，出于性能和功能方面的原因，需要从一开始就要实现自己的模型。QAbstactItemModel类为项目模型类提供了抽象接口，并且它可以被子类化以创建您自己的模型。QAbstractListModel和QAbstractTableModel继承了QAbstractItemModel，可以在创建列表或表格模型时将其子类化。在这一节中，我们将进一步介绍QAbstractTableM

到目前为止，我们已经讨论了如何将对象实例公开给QML上下文。有时我们还希望在QML中可以使用注册类本身。注册允许将类当作QML中的数据类型来使用。此外，注册还可以提供其他功能，比如允许在QML中将类用作可实例化的QML对象类型，或者允许在QML中导入和使用类的单例实例。通常我们使用Q_OBJECT宏注册从QObject派生的类，也可以用Q_GADGET宏声明一个比QObject“更轻”的版本。在这些更轻的类中，我们可以访问它们的属性、枚举和可调用的方法，但不能使用信号槽系统，我们稍后会进行介绍。1. 注