Qt Quick 开发基础 + 实战（持续更新中…）

最近更新日期：2024/12/5

一、Qt Quick简介

1.3 新建Qt Quick Application工程

1.3.1 导入Qt资源文件

1.3.2 设置应用图标（Windows系统）

二、QML

2.2 import

2.2.1 import模块

2.2.2 import代码文件

2.3 属性：property

2.4 方法

2.5 自定义信号

2.6 枚举

2.7 基本类型

2.8 其它类型

2.8.1 对象类型

2.8.2 JavaScript类型

2.9 JavaScript

2.10 自定义QML组件

2.11 作用域

2.12 代码风格

三、Qt Quick基础

四、Qt Quick控件

五、Qt Quick对话框

六、图片

七、动画

八、图形效果

九、粒子效果

十、Qt Quick 3D

十一、模型与视图

十二、图表

十三、数据可视化

十四、多媒体

十五、QML与C++交互

十六、新能源汽车中控屏

一、Qt Quick简介

写在前面：

本篇文章虽然只是作为我的学习笔记，但也作为我日后复习之用，所以会认真并详细记录，但会分重点。

1.3 新建Qt Quick Application工程

这节主要讲2个知识点，1个是【导入Qt资源文件】，1个是【设置应用图标】。

1.3.1 导入Qt资源文件

首先在工程目录中新建一个名为 images 的文件夹，把程序需要用到的图片放进去，png、ico格式的都一起。（ico格式的是用来作为应用图标的）

这里不用分格式、用途，全部一股脑放这个文件夹里就行。

图片放好之后，我们回到Qt Creator中，在工程目录中新建一个资源文件（Qt Resource File），文件名随意，我的就叫做images和图片文件夹名称一致。

添加好之后，你的工程目录中会多出一个后缀名为 .qrc 的文件，右键添加现有文件，把文件夹里的图片全部选中点击确定即可。然后你逐一点开这个qrc文件，就可以在这个文件里看到你上传的所有图片了。

到这里还没完，最后一步是点开工程目录中的 CMakeLists.txt 文件，然后在里面加一句代码（否则我们无法使用资源文件）：

set(CMAKE_AUTORCC ON)

这样就导入完成了，虽然有一丢丢麻烦，但是你总不会一直导的，对吧！？

1.3.2 设置应用图标（Windows系统）

应用图标的格式要求是 .ico 格式，png、jpg其他的可不行哦！上面我们已经导入了1张 ico 格式的图片，接下来我们看一下怎么设置成应用图标吧！

（这里推荐一个图片转ico格式的网站，免费且广告很少：锤子在线工具。）

首先我们在工程目录中新建一个文本文档，把文件名改为 ico.rc，然后双击打开这个文件，还是记事本打开哈，在里面写入下面这句代码：

IDI_ICON1  ICON DISCARDABLE   "images/青蛙大头贴_256x256.ico"

注意，双引号里面的是你自己的路径，写好之后保存该文件。

最后一步，点开工程目录中的 CMakeLists.txt 文件，在 qt_add_executable 里面加上：

ico.rc

我们运行一下看看，果然，报错了！

原来我们导入的资源文件是带中文的，真的是太太粗心了！但是为什么直接在 Image 模块中用带中文的路径能正常显示，而应用图标带中文就不行了呢？

这个我也不太清楚，建议大家还是都用英文和下划线吧！

把文件名改成英文，然后重新弄了一遍之后，运行成功了！包括任务栏图标也是这个可可爱爱的青蛙了~

二、QML

2.2 import

2.2.1 import模块

import是QML中的一个导入关键字，一般用于导入下面代码需要用到的模块。

这里讲一个特殊情况，比如在同一个代码文件中，我们需要导入多个名称相同或者非常相似的模块，容易搞混弄错，那么我们可以使用 as 关键字来给其中一些模块单独命名。

那相应的，我们使用这个模块的方式就要改变了，否则会报错。

2.2.2 import代码文件

代码文件比如说我们在其他qml文件中写了一些代码，想要在另外一个代码文件中使用，那么也需要import关键字去导入。

这种一般都是借用别人的代码，如果是我们自己写的话，大概率会直接在Qt Creator中新建相应的文件。

假设我们现在工程目录中粘贴了一个 MyButton的文件，现在想要在 Main.qml 中使用，那么就在顶部写上：

import "MyButton"

如果是文件中的代码文件该怎么导入呢？也很简单！直接把这个文件夹导入就行了，这样里面的所有文件都能使用了。

import "./FolderName"

格式就是 ./ + 文件夹名称。另外，这个也可以用 as关键字来简写，像下面这样：

import "./FolderName" as Fn

Fn.MyButton1 {

}

Fn.MyButton2 {

}

import用好了，做大一点的项目也会方便、清晰很多哦！

2.3 属性：property

只读：修饰符 readonly

只读属性必须给初始值，之后不允许修改。

附加属性

附加属性和附加信号处理器是一种允许对象使用额外的属性或信号处理器的机制，允许对象访问一些与个别对象相关的属性或者信号。

有点抽象对吧？没关系，看下面例子就行。

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ListView {
        width: 150; height: 400

        model: ListModel {
            id: listModel

            Component.onCompleted: {
                for ( var i = 0; i < 50; i++ )
                {
                    listModel.append( { "name" : "Item " + i } )
                }
            }
        }

        delegate: Text {
            text: name
            font.pixelSize: 32
        }
    }
}

这里的 onCompleted 就是 Component 的附加属性。我们不需要了解过深，只需要会用，知道哪些属性有附加属性可供使用就行了。

2.4 方法

方法就是函数，可以执行某些处理或者触发其他事件。可以将方法关联到信号上，这样在发射该信号时就会自动调用该方法。

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    function add(parameter) {
        testLabel.testResult -= parameter
    }
    
    function add(parameter) {
        testLabel.testResult += parameter
    }
    
    function getSum(para1, para2)
    {
        var result
        result = para1 + para2
        return result
    }
}

在qml中的函数其实不用写的太复杂，如果你真的有很复杂的函数需要实现，可以在C++中。

2.5 自定义信号

信号和信号接收器是一对，我们不仅可以在同一文件中去实现他们，甚至可以把信号写在另一个文件，在当前文件中用信号接收器去接收。

属性值改变信号

QML类型提供内建属性值改变信号，属性值改变就会自动发出信号。

Connections

用于连接外部对象的信号。可以接收指定目标的任意信号。

connect() 函数

将信号与动态创建的对象关联（也可以和函数关联）。

2.6 枚举

枚举（Enumeration）提供了一组固定的命名选项。

自定义的qml文件必须首字母大写。

枚举名字必须首字母大写。

2.7 基本类型

QML支持常见的数据类型，包括：整型、浮点型、字符串和布尔类型。在QML中，将这种仅指向简单数据的类型称为基本类型。

QML默认支持的基本类型
类型	描述
int	整型
bool	布尔型
real	单精度浮点型
double	双精度浮点型
string	字符串
list	QML对象列表
url	资源定位符
var	通用属性类型
enumeration	枚举

Qt Quick 模块提供的基本类型
类型	描述
color	ARGB颜色值
font	字体类型
matrix4x4	4x4矩阵
quaternion	四元数，包含一个标量以及x、y和z的属性
vector2d	二维向量，包含x、y属性
vector3d	三维向量，包含x、y、z属性
date	日期
point	点，包含x、y属性
size	大小值，包含width、height属性
rect	矩形值，包含x、y、width、height属性