QRadioButton

QRadioButton 是Qt框架中用于实现单选按钮的控件，继承自 QAbstractButton ，所以它自然拥有和按钮一样的鼠标悬停、鼠标按下等状态。它的样式美化和基本的按钮 QPushButton 差不多，唯一可能需要注意的是它的指示器 indicator ，即它的单选小圆圈🔘。

大多数情况下以及官方的文档都是用的 image 来实现，比如： image: url(:/images/radiobutton_checked.png); ，但是这样就会根据不同状态、不同主题效果下需要很多张图片来适应。

这里通过一种巧妙的 QSS 渐变颜色方式来实现最简单的圆形以及颜色控制，当然也可以通过 paintEvent 来自绘。

指示器

这里通过 QRadialGradient 镜像渐变的方式来实现选中的🔘。通过它在中心位置设置带颜色的实心小圆点。周围用透明颜色填充。比如下面的代码：

background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.4 black, stop:0.5 rgba(255, 255, 255, 0));

这里值得注意的是 stop:0.4 和 stop:0.5 ，这两个非常重要，如果这两个值比较接近，虽然更接近圆圈，但是会存在锯齿问题，建议尺寸较小的时候使用 0.4 即可，如果尺寸大于 128 px以上 建议使用 0.45-0.48 都可以。

样式代码

QRadioButton::indicator {
  width: 16px;
  height: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}
QRadioButton::indicator:unchecked:disabled {
  color: #FFF2F2F2;
  border-color: #FFF2F2F2;
}
QRadioButton::indicator:checked {
  background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.4 rgb(0, 0, 0), stop:0.5 rgba(255, 255, 255, 0));
}
QRadioButton::indicator:checked:disabled {
  border-color: #FFF2F2F2;
  background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.4 rgb(127.5, 127.5, 127.5), stop:0.5 rgba(255, 255, 255, 0));
}
QRadioButton::indicator:checked:hover {
  border-color: #FFEAEAEA;
  background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.4 #333333, stop:0.5 rgba(255, 255, 255, 0));
}
QRadioButton::indicator:checked:pressed {
  border-color: #FFEDEDED;
  background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.4 rgb(76.5, 76.5, 76.5), stop:0.5 rgba(255, 255, 255, 0));
}

效果图