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 内含除线性渐变外其他的渐变示例

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值