qt quick 作为QML语言的标准库，提供了很多基本元素和空间来帮助我们构建 QT Quick应用。

---

1、Rectangle

 Rectangle{x:200;y:200;width: 320;height: 480;color: "blue"border.color: "#808080";border.width: 2;radius: 20;}

效果：

解析：

Rectangle用来描绘一个填充矩形，可以带边框、也可以不带边框、可以使用纯色填充也可以使用渐变色填充。

​ x:200;表示位置信息X坐标
​ y:200;表示位置信息Y坐标
​ width: 320;指定宽
​ height: 480;指定高
​ color: "blue"填充的颜色
​ border.color: “#808080”;边框的颜色
​ border.width: 2;边框的宽度
​ radius: 20;圆形倒角半径

2、颜色

color类型有R、G、B、A、四个属性，分别表示一个颜色值的red\green\blue\alpha四个成分，红色、绿色、蓝色、透明度。

在QML中使用颜色。

第一种方式：直接使用颜色名字

第二种方式：使用“#RRGGBB”“AARRGGBB”来指定

第三种方式：使用Qt.rgba()、Qt.lighter()等方法来构造

代码：

//2、颜色的三种表示方法Rectangle{x:200;y:200;width: 32;height: 48;color: "blue"border.color: "#808080";border.width: 2;radius: 4;}Rectangle{x:300;y:200;width: 32;height: 48;//color: "blue"color: "#808080";border.width: 2;radius: 4;}Rectangle{x:400;y:200;width: 32;height: 48;color: Qt.rgba(0.8,0.6,0.2,1);border.color: "#808080";border.width: 2;radius: 4;}

效果：

3、渐变色

QML中渐变色的类型是Gradient,渐变色通过两个或多个颜色值来指定，QML会自动在你指定的颜色之间插值，进行无缝填充。Gradient使用GradientStop来指定一个颜色值和它的位置（0.0到1.0之间）。

代码：

Rectangle {width: 100; height: 100gradient: Gradient {GradientStop { position: 0.0; color: "red" }GradientStop { position: 0.33; color: "yellow" }GradientStop { position: 1.0; color: "green" }}}

效果：