Qt 5.4 QML 颜色值

Question

颜色值

关于颜色值， QML 中可以使用颜色名字，如 blue / red / green / transparent 等，也可以使用 #RRGGBB 或者 #AARRGGBB 来指定，还可以使用 Qt.rgba() / Qt.lighter() 等等方法来构造。

详情请参考 Qt SDK 中 QML Basic Type: color 页面。

全部颜色的设定在 Qt help document 的 color QML Basic Type 章节中有说明

渐变色

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

举例

Rectangle {
    width: 100; 
    height: 100;
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 0.33; color: "blue"; }
        GradientStop { position: 1.0; color: "#FFFFFF"; }
    }
}

Gradient 只能用来创建垂直方向的渐变，不过其它方向的，可以通过给 Rectangle 指定 rotation 属性来实现。下面是示例：

Rectangle {
    width: 100; 
    height: 100;
    rotation: 90;		//自旋 90°，实践证明是顺时针旋转
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 1.0; color: "#A0A0A0"; }
    }
}

刚刚我们使用了 rotation 属性，其实它来自 Rectangle 的父类 Item 。