如何自定义QRadioButton的选中与未选中样式？

Question

如何使用QSS自定义QRadioButton的选中与未选中样式？

Answer 1

如何使用QSS自定义QRadioButton的选中与未选中样式？

在Qt开发中，QSS（Qt Style Sheets）是模仿CSS语法的一种样式机制，允许开发者通过样式表来自定义控件外观。对于 QRadioButton 的样式定制，尤其是“选中”与“未选中”状态的视觉差异，掌握QSS的应用是非常关键的一项技能。

1. QRadioButton基础样式结构

QRadioButton 由两个主要部分组成：一个圆形指示器（indicator）和文本标签（text）。我们可以分别对这两部分进行样式设置。

• indicator：表示单选按钮的圆圈部分
• text：表示显示的文本内容

QRadioButton {
    spacing: 5px; /* 控制indicator与text之间的间距 */
}

QRadioButton::indicator {
    width: 16px;
    height: 16px;
}

2. 自定义未选中状态样式

当 QRadioButton 处于未选中状态时，我们可以通过伪状态 :unchecked 来定义其外观。

QRadioButton::indicator:unchecked {
    border: 2px solid #888;
    border-radius: 7px;
    background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 #fff, stop:1 #ddd);
}

3. 自定义选中状态样式

当用户选中某个选项时，可以使用伪状态 :checked 来更改样式。

QRadioButton::indicator:checked {
    border: 2px solid #4CAF50;
    border-radius: 7px;
    background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 #4CAF50, stop:1 #2E7D32);
}

4. 添加悬停和禁用状态效果

为了提升交互体验，我们可以为 QRadioButton 添加更多状态样式，如鼠标悬停和禁用状态。

状态	描述	示例代码片段
:hover	鼠标悬停时的样式	QRadioButton::indicator:hover { border-color: #FF9800; }
:disabled	控件不可用时的样式	QRadioButton::indicator:disabled { border-color: #aaa; }

5. 完整QSS样式示例

以下是一个完整的QSS样式示例，包含各种状态下的样式定义：

QRadioButton {
    font-size: 14px;
    color: #333;
    spacing: 8px;
}

QRadioButton::indicator {
    width: 18px;
    height: 18px;
}

QRadioButton::indicator:unchecked {
    border: 2px solid #888;
    border-radius: 9px;
    background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 #fff, stop:1 #ccc);
}

QRadioButton::indicator:checked {
    border: 2px solid #4CAF50;
    border-radius: 9px;
    background-color: qradialgradient(cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0 #4CAF50, stop:1 #2E7D32);
}

QRadioButton::indicator:hover {
    border-color: #FF9800;
}

QRadioButton::indicator:disabled {
    border-color: #aaa;
    background-color: #eee;
}

6. 使用QML或QWidget中的应用方式

QSS可以在QWidget项目中直接通过 setStyleSheet() 方法设置，也可以在QML中结合 ItemDelegate 或 RadioButton 组件使用。

1. C++代码中设置样式：

   myRadioButton->setStyleSheet("QRadioButton::indicator:checked { background-color: red; }");

2. QML中使用：

   RadioButton {
       styleSheet: "QRadioButton::indicator:checked { background-color: blue; }"
   }

7. 注意事项与调试技巧

虽然QSS功能强大，但也存在一些限制和注意事项：

• 不是所有CSS特性都支持
• 某些样式可能在不同平台下表现不一致
• 复杂样式可能导致性能下降

建议使用Qt Designer实时预览样式变化，或者编写小样例测试特定样式是否生效。

8. 进阶：使用图片资源美化样式

除了纯色和渐变，还可以使用图片来美化 QRadioButton 指示器。

QRadioButton::indicator:checked {
    image: url(:/icons/radio_checked.png);
}

这种方式适用于需要高度定制UI的企业级应用或商业产品。