QML学习笔记（三）QML基础语法其一：Rectangle及帮助文档的使用

前言

终于来到了要正式编写qml代码了，心里还有点小紧张和忐忑呢。
对于从未写过这种代码的开发者来说，这无疑是从0开始的。这一点我和所有人都是一样，所以咱们慢慢来，一点一点，一个一个来详细了解和学习。
当然，我会按照我自己的理解和节奏来。并且因为我已经对QWidget那一套有比较深入的经验，所以学习qml的时候，我会想当然地想要将他们对比。
比如qml这样实现的话，那在传统qwidget中是怎么实现呢？——你大概会看到我经常做这种对比。
话不多说，我们直接新建一个叫做QmlSyntax的空工程，来学习一下基本的语法吧。（会有些啰嗦，见谅哦）

一、顶层窗口

这是咱们的初始代码：

import QtQuick 2.14
import QtQuick.Window 2.14Window {visible: truewidth: 640height: 480title: qsTr("QML Syntax Demo")
}

除了像头文件一样的模块引入外，这里的第一个元素就是Window，在qml中是顶层窗口的意思，成功加载并运行后，你会看到一个空白的顶层窗口显示出来。
Window这个元素类型后面，紧跟着的是花括号{}，里面包含的是它的基本属性和元素，比如我们所熟悉的width、height，它们直接通过冒号来进行赋值，对于数字类型的赋值，直接写上去即可。但对于一些有特殊含义的字符，往往需要用""来包含起来，这一点后面会演示。
除了宽高外，这里还有一个visible，代表是否可视，如果你希望他默认就是显示的，给个布尔值true即可。
标题往往也是一个顶层窗口比较重要的元素，还会显示在任务栏上。这里用的是title，后面的qsTr代表可以被qt的翻译器识别，后期用做多语言转换。如果你写入的是中文标题，建议用qsTr包括起来。
这样一个个解释似乎有些啰嗦了，后续对于相同内容我就不多解释了，大家多写写熟悉一下，自然就能领悟。
接下来我们要添加新的东西咯。

二、添加第一个Rectangle

我们在Window中添加一个Rectangle元素，你会发现窗口中直接出现了一个红色的矩形。

Rectangle{id: redRectIdwidth: 100height: 100color: "red"}

Rectangle就是矩形的意思，事实上也确实出现了一个矩形。
我给它设置了一些属性，除了宽高、颜色这种无需过多解释的属性外，还有一个叫id的东西。
事实上这个id并非是Rectangle的专属，而是所有qml内部控件元素的一个身份标识，也是唯一的一个名字。
假设我们添加了两个Rectangle，那么我们完全可以设置两个不同的id名字来将它们区分开来。这个id非常重要，在c++代码中如果想要地对特定的qml内部控件做直接操作（如获取宽高），就需要用到这个id。
所以一般来说，我们建议给这些元素加一个id，名字就给它取一个直观些的对象名即可。
这一点，其实在qwidget的ui中也有类似的对应，就是当我们对一个控件设置名字的时候，这个名字必须是唯一的。样式表需要对特定按钮进行特殊设置的时候，往往也用到了这个名字。如果控件是在c++中创建的，然后又希望qss样式表能对它进行精准识别和设置的话，还需要在代码层面上setObjectName才行。

说到这里，我不禁有一个疑问。这个Rectangle到底只是简单画一个矩形，还是说这是一个通用的布局控件呢？对此我问了一下kimi同学，它说Rectangle类似于QWidget中的QFrame，是一个无边框、可自绘、能当容器的“裸矩形“，而它并不算是一个具体的控件，比如Button、Label等。所以这里，我们简单讲Rectangle理解为一个容器即可。

三、对Rectangle做更多的操作

上一节还有一个小知识点，就是当我们没有对它进行坐标或位置的设置时，Rectangle默认是在左上角(0,0)的坐标的，这种左上角的坐标系和QWidget中是一样的。
这个时候，我们设置一下x，y的坐标值，你会看到矩形产生了偏移。

除了直接设置x和y之外，网上教程经常会冷不丁出现一个叫anchors（锚）的东西，设置一句anchors.centerIn: parent之后，Rectangle就能直接在父窗口（也就是Window）中居中显示了。就算是手动拉伸Window的边缘，它也始终居中，就像自伸缩的自动布局一样。

自动居中的布局：

关于这个anchors，肯定是用于布局的一个重要功能，这个东西在QWidget中可没有哦，在后续的章节中我会有更深入的学习的。
除此之外，还可以对它进行边框的设置：
radius: 20之后，矩形四角就有一个半径为20像素的圆角样式了。

进一步的，我们增大边框圆角的半径，就可以实现一个标准的圆形。
如果你在QWidget中实现过一个圆形标签或圆形按钮的话，你会发现它的样式表也是通过类似方式来写的。

但这里只涉及到边框的圆角，但实际上边框线条压根没出来，因为没有设置边框的线粗，更别提边框的颜色，线条样式这些东西了。
但，具体要怎么设置呢？我们并不清楚啊！
可恶，难道只能百度和死记硬背了吗？
这里，我们必须要学习使用一些QT自带的帮助文档了！

四、通过帮助文档来学习qml元素的使用

我们在qt IDE中，点击最左侧的帮助，然后切换“索引”模式，并输入Rectangle之后，就能找到这个元素对应的帮助信息。
很可惜，qt的帮助文档是纯英文的，但幸运的是，对于英文水平的要求并不是很高，实在不会的话就自行翻译吧。

这里我们直接往下翻，直接就看到了qt官方给的演示代码。里面的border.color: "black"和border.width: 5正是我想要。

将线框代码添加，运行后看到了想要的结果。

继续往下翻，我们看到了新的没见过的写法。

添加代码后运行，看看效果。

这里首先有一个点，那就是原来这些属性是可以并排一起写的，只需要用;分号隔开即可。经试验，单个属性默认不加分号，但如果按照C++习惯加个分号，也不会有影响。然而在花括号}后面加分号，运行时会报错，语法错误哦。
然后就是对于颜色的设置，除了可以用默认的颜色名字，也就是字符串文本描述外，还可以使用标准化的英文颜色名。
但我总觉得还少了些，因为QWidget的话会用到rgb(0,0,255)这种写法。于是我问过kimi之后，发现其实还有其他的方式，这里也一并放上来吧。

1. 十六进制字符串（最常用）

color: "#FF0000"        // 红
color: "#FF000080"      // 红+半透明
color: "#F00"           // 3 位简写

2. 英文颜色名（SVG 标准）

color: "red"
color: "lightsteelblue"

3. Qt.rgba() 函数（带透明度）

color: Qt.rgba(1, 0, 0, 1)           // 红，不透明
color: Qt.rgba(1, 0, 0, 0.5)         // 红，半透明

4. Qt.hsla() 函数（HSL 空间）

color: Qt.hsla(0, 1, 0.5, 1)         // 红，HSL

5. 整数 RGB（0-255）

color: Qt.rgba(255/255, 0/255, 0/255, 1)   // 红

这里我主要关注的还是能不能直接写rgb的方式，因为对我来说，rgb这种0~255的方式更加熟悉和方便，如果每次都要换算成#000000的话反而没那么直观。
结果问题来了，color: Qt.rgba(0,0,255,255)和color: Qt.rgba(0,0,1,255)都是蓝色，而color: Qt.rgba(0,0,0.6,255)反而是暗蓝色。

这里我直接问了下kimi，发现——“QML 的 Qt.rgba 四个参数都是 0.0–1.0 浮点，超出自动 clamp，不是 0–255。”
这就和我习惯的不一样了，有点头疼。
不过其实kimi在第一次回答里就说了，直接除个255就行了，问题不大。（color: Qt.rgba(255/255, 0/255, 0/255, 1)）
对了，有关透明通道的效果也是符合预期的。

可以看到，设置了不透明度的蓝色叠加上去是有重合部分的。
好了，有关颜色的描述就讲到这里，我们继续往下看，还有新的样式方法。

这里我就不贴运行图了，大概就是这三种蓝色的效果。一个是普通的浅蓝色，一个是上下的蓝色渐变，一个是左右的蓝色渐变。
关于这种渐变色的样式，即便我之前写QWidget代码也很少会用到，但我们大概知道有这个东西即可。
至于gradient: Gradient是什么，hhh，这种不常用的东西，我们现阶段没必要过多纠结，不是吗？

五、总结

今天的学习就到这里了！
Rectangle的基本使用已经熟悉了，有关颜色的设置，还有帮助文档的使用也已经学会了。
其实对于这种布局窗口的控件，也就是类比到QWidget嘛，我们学习到通过这种样式设置，画出背景颜色、线框、圆角，就基本能满足需求了。
接下来的只剩下加载ui图片来实现更复杂的样式，还有就是鼠标三态的样式切换，以及容器内部的布局方式。学会这些，我感觉有关“样式”和“布局”，就已经达到80%的水平了。之后就可以去详细学一些常用控件的具体使用方式。
我们下节再见！