【QML学习7】颜色与渐变

1. 颜色的描述方式

颜色的描述方式有以下三种：

Item {
    width: 300; height: 100

    Rectangle {
        x: 0; y: 0; width: 100; height: 100; color: "#ff0000"
    }
    Rectangle {
        x: 100; y: 0; width: 100; height: 100
        color: Qt.rgba(0,0.75,0,1)
    }
    Rectangle {
        x: 200; y: 0; width: 100; height: 100; color: "blue"
    }
}

1. 通过16进制数字来描述，如"#ff0000"，其含义是#<rr><gg><bb>,<rr>描述红色通道的值，<gg>描述绿色通道的值，<bb>描述蓝色通道的值，如果需要描述不透明度，可以加两位<aa>，总体变为8位十六进制：#<aa><rr><gg><bb>。每一个值的范围是00-FF(即十进制的0-255)；
2. 使用Qt.rgba(0,0.75,0,1)描述，取值分别表示红色通道、绿色通道、蓝色通道和不透明度，取值范围为[0,1]；
3. 使用约定的颜色名称，如"blue"。
   具体有以下颜色(参见QT文档)：

Name	Hex	Color
aliceblue	#f0f8ff
antiquewhite	#faebd7
aqua	#00ffff
aquamarine	#7fffd4
azure	#f0ffff
beige	#f5f5dc
bisque	#ffe4c4
black	#000000
blanchedalmond	#ffebcd
blue	#0000ff
blueviolet	#8a2be2
brown	#a52a2a
burlywood	#deb887
cadetblue	#5f9ea0
chartreuse	#7fff00
chocolate	#d2691e
coral	#ff7f50
cornflowerblue	#6495ed
cornsilk	#fff8dc
crimson	#dc143c
cyan	#00ffff
darkblue	#00008b
darkcyan	#008b8b
darkgoldenrod	#b8860b
darkgray	#a9a9a9
darkgreen	#006400
darkgrey	#a9a9a9
darkkhaki	#bdb76b
darkmagenta	#8b008b
darkolivegreen	#556b2f
darkorange	#ff8c00
darkorchid	#9932cc
darkred	#8b0000
darksalmon	#e9967a
darkseagreen	#8fbc8f
darkslateblue	#483d8b
darkslategray	#2f4f4f
darkslategrey	#2f4f4f
darkturquoise	#00ced1
darkviolet	#9400d3
deeppink	#ff1493
deepskyblue	#00bfff
dimgray	#696969
dimgrey	#696969
dodgerblue	#1e90ff
firebrick	#b22222
floralwhite	#fffaf0
forestgreen	#228b22
fuchsia	#ff00ff
gainsboro	#dcdcdc
ghostwhite	#f8f8ff
gold	#ffd700
goldenrod	#daa520
gray	#808080
grey	#808080
green	#008000
greenyellow	#adff2f
honeydew	#f0fff0
hotpink	#ff69b4
indianred	#cd5c5c
indigo	#4b0082
ivory	#fffff0
khaki	#f0e68c
lavender	#e6e6fa
lavenderblush	#fff0f5
lawngreen	#7cfc00
lemonchiffon	#fffacd
lightblue	#add8e6
lightcoral	#f08080
lightcyan	#e0ffff
lightgoldenrodyellow	#fafad2
lightgray	#d3d3d3
lightgreen	#90ee90
lightgrey	#d3d3d3
lightpink	#ffb6c1
lightsalmon	#ffa07a
lightseagreen	#20b2aa
lightskyblue	#87cefa
lightslategray	#778899
lightslategrey	#778899
lightsteelblue	#b0c4de
lightyellow	#ffffe0
lime	#00ff00
limegreen	#32cd32
linen	#faf0e6
magenta	#ff00ff
maroon	#800000
mediumaquamarine	#66cdaa
mediumblue	#0000cd
mediumorchid	#ba55d3
mediumpurple	#9370db
mediumseagreen	#3cb371
mediumslateblue	#7b68ee
mediumspringgreen	#00fa9a
mediumturquoise	#48d1cc
mediumvioletred	#c71585
midnightblue	#191970
mintcream	#f5fffa
mistyrose	#ffe4e1
moccasin	#ffe4b5
navajowhite	#ffdead
navy	#000080
oldlace	#fdf5e6
olive	#808000
olivedrab	#6b8e23
orange	#ffa500
orangered	#ff4500
orchid	#da70d6
palegoldenrod	#eee8aa
palegreen	#98fb98
paleturquoise	#afeeee
palevioletred	#db7093
papayawhip	#ffefd5
peachpuff	#ffdab9
peru	#cd853f
pink	#ffc0cb
plum	#dda0dd
powderblue	#b0e0e6
purple	#800080
red	#ff0000
rosybrown	#bc8f8f
royalblue	#4169e1
saddlebrown	#8b4513
salmon	#fa8072
sandybrown	#f4a460
seagreen	#2e8b57
seashell	#fff5ee
sienna	#a0522d
silver	#c0c0c0
skyblue	#87ceeb
slateblue	#6a5acd
slategray	#708090
slategrey	#708090
snow	#fffafa
springgreen	#00ff7f
steelblue	#4682b4
tan	#d2b48c
teal	#008080
thistle	#d8bfd8
tomato	#ff6347
turquoise	#40e0d0
violet	#ee82ee
wheat	#f5deb3
white	#ffffff
whitesmoke	#f5f5f5
yellow	#ffff00
yellowgreen	#9acd32

2. 渐变色

渐变属性的描述如下，GradientStop用来声明每一个变化节点，position是描述竖直方向的位置，[0,1]在元素范围内，< 0 的位置在元素上方，> 0 的位置在元素下方。

gradient: Gradient {
    GradientStop { position: 0.0; color: "lightsteelblue" }
    GradientStop { position: 1.0; color: "blue" }
}

渐变色只有一个方向（竖直方向），如果想要得到其他方向的渐变，只能通过旋转元素。