在 Qt 中,可以使用 Qt 样式表(QSS) 来自定义 QRadioButton
的外观。样式表类似于 CSS,允许你设置控件的颜色、字体、边框、背景等属性。
以下是如何为 QRadioButton
设置样式表的详细说明和示例。
1. 基本样式设置
你可以通过 setStyleSheet
方法为 QRadioButton
设置样式。
示例:设置文本颜色和字体
QRadioButton *radioButton = new QRadioButton("选项 1", this);
radioButton->setStyleSheet("color: red; font-size: 16px; font-weight: bold;");
示例:设置选中和未选中状态的颜色
radioButton->setStyleSheet(
"QRadioButton { color: black; }" // 默认状态
"QRadioButton::indicator:checked { background-color: green; }" // 选中状态
"QRadioButton::indicator:unchecked { background-color: gray; }" // 未选中状态
);
2. 自定义指示器(Indicator)
QRadioButton
的指示器(即单选按钮的小圆圈)可以通过样式表自定义。
示例:修改指示器的大小和形状
radioButton->setStyleSheet(
"QRadioButton::indicator {"
" width: 20px;"
" height: 20px;"
" border-radius: 10px;" // 圆形
" border: 2px solid black;"
"}"
"QRadioButton::indicator:checked {"
" background-color: green;"
"}"
"QRadioButton::indicator:unchecked {"
" background-color: gray;"
"}"
);
3. 悬停和按下状态
你可以为 QRadioButton
设置悬停(hover)和按下(pressed)状态的样式。
示例:设置悬停和按下状态
radioButton->setStyleSheet(
"QRadioButton {"
" color: black;"
"}"
"QRadioButton:hover {"
" color: blue;" // 悬停时文本颜色
"}"
"QRadioButton::indicator:checked {"
" background-color: green;"
"}"
"QRadioButton::indicator:unchecked {"
" background-color: gray;"
"}"
"QRadioButton::indicator:pressed {"
" border: 2px solid red;" // 按下时边框颜色
"}"
);
4. 禁用状态
你可以为禁用的 QRadioButton
设置样式。
示例:设置禁用状态
radioButton->setStyleSheet(
"QRadioButton:disabled {"
" color: gray;" // 禁用时文本颜色
"}"
"QRadioButton::indicator:disabled {"
" background-color: lightgray;" // 禁用时指示器颜色
"}"
);
5. 完整示例
以下是一个完整的示例,展示如何为 QRadioButton
设置样式表。
#include <QApplication>
#include <QWidget>
#include <QRadioButton>
#include <QVBoxLayout>
class MyWindow : public QWidget {
public:
MyWindow(QWidget *parent = nullptr) : QWidget(parent) {
// 设置窗口标题
setWindowTitle("QRadioButton 样式表示例");
// 创建布局
QVBoxLayout *layout = new QVBoxLayout(this);
// 创建单选按钮
QRadioButton *radioButton1 = new QRadioButton("选项 1", this);
QRadioButton *radioButton2 = new QRadioButton("选项 2", this);
// 设置样式表
radioButton1->setStyleSheet(
"QRadioButton {"
" color: black;"
" font-size: 14px;"
"}"
"QRadioButton::indicator {"
" width: 20px;"
" height: 20px;"
" border-radius: 10px;"
" border: 2px solid black;"
"}"
"QRadioButton::indicator:checked {"
" background-color: green;"
"}"
"QRadioButton::indicator:unchecked {"
" background-color: gray;"
"}"
"QRadioButton:hover {"
" color: blue;"
"}"
"QRadioButton::indicator:pressed {"
" border: 2px solid red;"
"}"
);
// 将单选按钮添加到布局中
layout->addWidget(radioButton1);
layout->addWidget(radioButton2);
}
};
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
// 创建主窗口
MyWindow window;
window.show();
// 运行应用程序
return app.exec();
}
6. 样式表属性说明
以下是一些常用的样式表属性:
属性 | 说明 |
---|---|
color | 文本颜色 |
font-size | 字体大小 |
font-weight | 字体粗细(如 bold ) |
background-color | 背景颜色 |
border | 边框(如 2px solid black ) |
border-radius | 边框圆角半径(用于圆形指示器) |
width / height | 指示器的宽度和高度 |
::indicator | 指示器的样式 |
:checked | 选中状态的样式 |
:unchecked | 未选中状态的样式 |
:hover | 悬停状态的样式 |
:pressed | 按下状态的样式 |
:disabled | 禁用状态的样式 |