前言
前段使用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;
}