赞
踩
前段使用QRadioButton控件,发现修改样式之后,默认勾选的同心圆样式没了,变成实心圆了,网上搜索了一圈,发现大家都是贴图,然后自己研究了一下,使用渐变颜色可以实现这个效果,现在有空就记录一下
废话不多说,先看效果
样式表示例如下,关键还是看渐变样式qradialgradient,渐变样式不理解的自己多拿几组数据测试一下看看效果; 根据需要自己调整颜色和白色圆环面积,如果勾选框变方了,尝试调整一下border-radius的大小
QRadioButton { font: 75 12pt "微软雅黑"; background: transparent; color:black; border: none; } QRadioButton:disabled { color: gray; } QRadioButton::indicator { width: 12px; height: 12px; border-radius: 8px; } QRadioButton::indicator:checked { width: 14px; height: 14px; background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 rgba(4, 156, 232 ,255), stop:0.6 rgba(4, 156, 232 ,255),stop:0.65 rgba(255, 255, 255, 255), stop:0.8 rgba(255, 255, 255, 255), stop:0.85 rgba(4, 156, 232, 255), stop:1 rgba(4, 156, 232 ,255)); border: 1px solid rgb(4, 156, 232); border-radius: 8px; } QRadioButton::indicator:unchecked { background-color: white; border: 2px solid rgb(66, 66, 66); } QRadioButton::indicator:unchecked:disabled { background-color: rgb(213, 213, 213); border: 2px solid rgb(200, 200, 200); } QRadioButton::indicator:checked:disabled { width: 14px; height: 14px; background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 gray, stop:0.6 gray,stop:0.65 white, stop:0.8 white, stop:0.85 gray, stop:1 gray); border: 1px solid gray; border-radius: 8px; }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。