qml gradient 横向渐变
程序员文章站
2022-06-27 14:21:33
...
qml 在5.12以下版本是没有从左到右的横向渐变方法设置的,如下:
Rectangle {
gradient: Gradient {
GradientStop {
color: "#333"
position: 0
}
GradientStop {
color: "#222"
position: 1
}
}
}
上面代码定义的渐变是从上到下的渐变。左右横向渐变则不太好实现(如果是Qt5.12版本则可以直接设置,下面会有介绍),看网上教程有说进行旋转,但总感觉不是正常的解决方法。
搜了下资料发现LinearGradient可以实现,示例代码如下
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(300, 0)
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 1.0; color: "black" }
}
}
采用这种方法,可以在qt5.12以下兼容向下的实现横向渐变
下面说一下5.12实现横向渐变,一句话:
orientation:Gradient.Horizontal
解释一下:这个orientation可以设置Gradient的方向,默认是从上到下的方向,也就是垂直方向。
贴一下文档:
具体代码如下:
Rectangle {
gradient: Gradient {
orientation:Gradient.Horizontal //横向展示
GradientStop {
color: "#333"
position: 0
}
GradientStop {
color: "#222"
position: 1
}
}
}
推荐阅读
-
CSS3,线性渐变(linear-gradient)的使用总结
-
CSS3 linear-gradient线性渐变生成加号和减号的方法
-
利用CSS3的线性渐变linear-gradient制作边框的示例
-
CSS3,线性渐变(linear-gradient)的使用总结
-
Android实现 Shape属性gradient 渐变效果
-
详解CSS3中使用gradient实现渐变效果的方法
-
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
-
利用CSS3的线性渐变linear-gradient制作边框的示例
-
js实现颜色阶梯渐变效果(Gradient算法)
-
css3实现圆锥渐变conic-gradient效果