最近更新日期：2024/12/5
目录
一、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中，将这种仅指向简单数据的类型称为基本类型。
| 类型 | 描述 |
|---|---|
| int | 整型 |
| bool | 布尔型 |
| real | 单精度浮点型 |
| double | 双精度浮点型 |
| string | 字符串 |
| list | QML对象列表 |
| url | 资源定位符 |
| var | 通用属性类型 |
| enumeration | 枚举 |
| 类型 | 描述 |
|---|---|
| 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属性 |
随便举几个例子：
2.8 其它类型
2.8.1 对象类型
QML对象类型用于对象实例化，与基本类型的区别是它可以声明一个对象。例如：Rectangle、Button等对象类型。
2.8.2 JavaScript类型
Qt Quick 支持JavaScript对象和数组。可以创建任何标准的JavaScript类型，例如：Date、Array等。
2.9 JavaScript
1. JavaScript在QML中的定位
1）辅助实现复杂的界面逻辑，扩展QML功能
2）主流是QML搭配C++实现完整的程序
3）执行效率远低于C++
4）过度使用JavaScript代码会导致复杂度增加、可维护性降低
2. 属性绑定
1）属性绑定可以是表达式、对象属性、JavaScript函数
2）语法 “属性 ：值”
3）属性绑定一旦被重新赋值，就会解除绑定关系
4）如果需要重新绑定，使用 Qt.binding() 函数
3. 调用外部JavaScript文件
import "script.js" as MyScript2.10 自定义QML组件
1. 定义对象类型
1）必须以大写字母开头，不能包含除字母、数字、下划线以外的字符。这个后缀名为 .qml 的文件会被引擎识别为1个QML类型的定义
2）同一目录的其它QML文件会被自动设置为可用
2. 自定义类型的可访问特性
property propertyType propertyName : value
将自定义类型的属性暴露出去，在其他文件就可以修改。
2.11 作用域
1. 作用
1）表达式可以访问哪些变量
2）重名时的优先级
2. 绑定的作用域对象
Item {
anchors.left: parent.left
}3. 组件作用域
1）QML文件每个组件都定义了一个逻辑作用域
2）每个文件都至少有一个根组件
4. 作用域使用技巧
id.property（通过另一个作用域的id来调用）
2.12 代码风格
Qt帮助文档查找：QML Coding Conventions
1. QML对象声明
2. 属性组
3. 列表
4. 信号处理器
5. JavaScript代码
6. 复杂条件判断