导语
有了前面的基础知识，已经可以编写一个简单的Qt Quick应用，在进行更复杂的编程之前，我们先来了解一些图形动画的知识，希望可以通过这些炫酷有趣的内容让大家坚持我们的学习。在这一部分课程的开始，先来看一下QML中颜色和渐变如何来使用。
下面我们开始！
颜色
在Qt帮助的color QML Basic Type页面，可以看到color是QML的基础类型，它用来表示一个 ARGB颜色值。一般可以通过下面三种方式来指定一个颜色：
使用SVG颜色名称：例如蓝色blue，绿色green，深蓝色darkblue等，在帮助中查找color QML Basic Type关键字对应的页面，最后罗列了所有支持的颜色名称。如下图所示。
通过“#RRGGBB”或“#AARRGGBB”格式的十六进制表示：例如蓝色可以使用“#0000FF”表示，稍微透明的蓝色可以使用“#800000FF”表示。对于初学者，简单这样理解即可：AA、RR、GG、BB分别表示颜色的不透明度、红色分量、绿色分量和蓝色分量，其取值范围都是0~256，也就是十六进制的00~FF。下面来看一个示意图。
使用Qt相关函数：例如Qt.rgba()，Qt.hsva()，Qt.hsla()，Qt.darker()，Qt.lighter()，Qt.tint()等。下面重点介绍rgba()函数，其他函数可以自行查看帮助文档，该函数原型如下：
color rgba(real red, real green, real blue, real alpha)；
其中参数red、green、blue和alpha分别指定颜色的红、绿、蓝、alpha分量，取值范围都是0~1，所以，rgba(1, 0, 0, 1)就是红色。
下面来看一个例子：
Window {
visible: true
width: 250; height: 170
Grid {
columns: 3
spacing:2
Rectangle {
color: "steelblue"
width: 80; height: 80
Text { text: qsTr("1"); anchors.centerIn: parent }
}
Rectangle {
color: "transparent"
width: 80; height: 80
Text { text: qsTr("2"); anchors.centerIn: parent }
}
Rectangle {
color: "#FF0000"
width: 80; height: 80
Text { text: qsTr("3"); anchors.centerIn: parent }
}
Rectangle {
color: "#800000FF"
width: 80; height: 80
Text { text: qsTr("4"); anchors.centerIn: parent }
}
Rectangle {
color: "#80000000"
width: 80; height: 80
Text { text: qsTr("5"); anchors.centerIn: parent }
}
Rectangle {
color: Qt.rgba(1, 0, 1, 1)
width: 80; height: 80
Text { text: qsTr("6"); anchors.centerIn: parent }
}
}
}
程序运行效果，如下图所示。
提示：在编辑代码时，可以鼠标单击Rectangle，这时会在其后面显示一个小灯泡图标，如下图所示。
单击该图标可以调出快捷工具栏，设置填充、颜色、边框等。如下图所示。
根据不同的类型会显示不同的工具栏，例如动画工具栏、图片工具栏、文本工具栏等。也可以通过鼠标右键的“显示Qt Quick工具栏”菜单项来调出工具栏。
渐变
使用Gradient类型可以定义一个渐变，该类型只有两个属性orientation和stops，前者可选Gradient.Vertical（默认值）或者Gradient.Horizontal来设置垂直或者水平方向的渐变；后者用来指定一组GradientStop子项目来设置渐变不同位置的颜色，包含一个color属性来设置颜色，和一个position属性来设置位置，位置使用0~1来指定。下面先来看一个例子：
Window {
visible: true
width: 640
height: 480
Rectangle {
width: 100; height: 100
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
}
}
效果如下图所示。
如果想设置水平渐变，指定orientation属性即可，例如：
Rectangle {
x: 150; width: 100; height: 100
gradient: Gradient {
orientation : Gradient.Horizontal
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
}
运行效果如下图所示。
这里需要注意orientation属性是Qt 5.12引入的，所以要使用该属性，需要导入：import QtQuick 2.12 。另外，要想实现带角度的渐变，可以使用后面讲到的旋转和剪切来实现，不过，更简单的方法是使用后面要讲到的图形效果模块，里面提供了现成的锥形渐变、线性渐变和辐射渐变。
结语
从本节内容开始，我们将涉及图形、动画相关的知识，颜色、渐变是进入彩色世界的基础，下一节我们将讲述图片相关的内容。
第9篇 Qt Quick入门教程之基础（九）文本显示和字体
第10篇 Qt Quick入门教程之基础（十）文本输入
----------------------------------------------------------------------------------------------------------------------
我们尊重原创，也注重分享，文章来源于微信公众号：yafeilinux和他的朋友们，建议关注公众号查看原文。如若侵权请联系qter@qter.org。
----------------------------------------------------------------------------------------------------------------------
|
