qt quick基本元素

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: 100
      gradient: Gradient {
          GradientStop { position: 0.0; color: "red" }
          GradientStop { position: 0.33; color: "yellow" }
          GradientStop { position: 1.0; color: "green" }
      }
  }

效果：