Qt 样式表、绘图事件设置渐变色

先放效果图:这里的窗体颜色、字体、pushbutton背景都是渐变色
在这里插入图片描述

渐变色的颜色可以在:链接 获取 对应网址:https://webgradients.com/

现在来说具体操作步骤:

关于这个窗体的背景颜色,这里是直接重写了绘图事件
在这里插入图片描述
注意这里的枚举值,这个和上面网站里面的颜色名是对应的,Qt已经封装好了
在这里插入图片描述
下面是颜色渐变过程,还有复制CSS样式表,但是这个样式表在qt内并不能直接使用,只能设置如上面对应的枚举或者使用下面的颜色渐变,可以自己选取颜色搭配一下

这里是pushbutton内的样式表:

color:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #43e97b,stop:1 #38f9d7);
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #FFE29F, stop:0.48 #FFA99F, stop: 1 #FF719A);

color:字体颜色
background-color:背景色
qlineargradient:线性渐变
设置渐变方向
x1,x2表示水平方向:x1=0,x2=0(水平方向不变)
y1,y2表示垂直方向:y1=0,y2=1(沿垂直方向渐变)

spread:pad:渐变的模式为 pad,另外的两个模式为 repeat、reflect
stop:0 #FFE29F 就是在坐标为 0 的点设置颜色为 #FFE29F;
stop:0.48 #FFA99F 就是在坐标为 0.48 的位置转变颜色为 #FFA99F
stop: 1 #FF719A 在坐标为 1 的位置转变颜色为 #FF719A

这里颜色值也可以不使用十六进制数,使用rgb:

background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgb(255, 255, 255) , stop:0.19 #57c6e1, stop: 0.42  #b49fda, stop:0.45 #b49fda, stop:1 #7ac5d8);

stop: 0 使用的rgb值,当然rgba也可以,最后一位指定透明度
效果:在这里插入图片描述
stop:0 rgba(255, 255, 255, 70) 的效果:
在这里插入图片描述

@转载:https://blog.51cto.com/u_15127604/3992310 内含除线性渐变外其他的渐变示例

猜你喜欢

转载自blog.csdn.net/TheKoi/article/details/125541146
今日推荐