qml color value - KerwinKoo/KerwinKoo.github.io GitHub Wiki
关于颜色值, 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 。