QRadioButton样式设置(渐变)

前言

前段使用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;
}
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Li_Zhi_Yao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值