小项目实验-QT 让单选按钮显示外边框

1.概要

 // 设置全局样式表（包含外边框）  
    QString style = R"(  
        QRadioButton {  
            border: 2px solid #2196F3;  /* 蓝色外边框 */  
            border-radius: 8px;         /* 圆角效果 */  
            padding: 8px;               /* 内边距 */  
            spacing: 10px;               /* 图标与文本间距 */  
        }  
          
        QRadioButton::indicator {  
            width: 20px;                 /* 圆环宽度 */  
            height: 20px;                /* 圆环高度 */  
            border-radius: 10px;         /* 圆形效果 */  
        }  
          
        QRadioButton::indicator:unchecked {  
            background-color: #f0f0f0;   /* 未选中背景 */  
            border: 2px solid #cccccc;   /* 未选中边框 */  
        }  
          
        QRadioButton::indicator:checked {  
            background-color: #2196F3;   /* 选中状态颜色 */  
            border: 2px solid #1976D2;   /* 选中边框颜色 */  
        }  
    )";  

2.代码

#include <QApplication>
#include <QMainWindow>
#include <QRadioButton>
#include <QVBoxLayout>
#include <QWidget>
#include <QFont>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建主窗口
    QMainWindow mainWindow;
    QWidget *centralWidget = new QWidget(&mainWindow);
    mainWindow.setCentralWidget(centralWidget);

    // 创建垂直布局
    QVBoxLayout *layout = new QVBoxLayout(centralWidget);

    // 创建三个单选按钮
    QRadioButton *radio1 = new QRadioButton("选项一");
    QRadioButton *radio2 = new QRadioButton("选项二");
    QRadioButton *radio3 = new QRadioButton("选项三");

    // 设置全局样式表（包含外边框）
    QString style = R"(
        QRadioButton {
            border: 2px solid #2196F3;  /* 蓝色外边框 */
            border-radius: 8px;         /* 圆角效果 */
            padding: 8px;               /* 内边距 */
            spacing: 10px;               /* 图标与文本间距 */
        }

        QRadioButton::indicator {
            width: 20px;                 /* 圆环宽度 */
            height: 20px;                /* 圆环高度 */
            border-radius: 10px;         /* 圆形效果 */
        }

        QRadioButton::indicator:unchecked {
            background-color: #f0f0f0;   /* 未选中背景 */
            border: 2px solid #cccccc;   /* 未选中边框 */
        }

        QRadioButton::indicator:checked {
            background-color: #2196F3;   /* 选中状态颜色 */
            border: 2px solid #1976D2;   /* 选中边框颜色 */
        }
    )";

    // 应用样式表
    radio1->setStyleSheet(style);
    radio2->setStyleSheet(style);
    radio3->setStyleSheet(style);

    // 设置文本字体大小
    QFont font = radio1->font();
    font.setPointSize(12);  // 设置12号字体
    radio1->setFont(font);
    radio2->setFont(font);
    radio3->setFont(font);

    // 添加按钮到布局
    layout->addWidget(radio1);
    layout->addWidget(radio2);
    layout->addWidget(radio3);

    // 设置窗口属性
    mainWindow.resize(300, 250);
    mainWindow.setWindowTitle("带外边框的单选按钮示例");
    mainWindow.show();

    return app.exec();
}

3.运行效果

4.关联知识