Qt 同时只能选中一个按钮实现

实现Qt单选按钮网格：优雅解决多选一交互需求

引言

在GUI开发中，经常需要处理一组互斥选项的选择（如模式切换、参数选择等）。Qt的QButtonGroup结合网格布局能优雅地实现这种需求。本文将解析一个4×4单选按钮网格的实现，按钮默认绿色，选中时变为红色，且同一时间只能选择一个按钮。

核心实现

以下代码创建了自包含的SingleSelectionButtonGrid控件：

class SingleSelectionButtonGrid : public QWidget {
    Q_OBJECT
public:
    SingleSelectionButtonGrid(QWidget *parent = nullptr) : QWidget(parent) {
        // 1. 创建网格布局和按钮组
        QGridLayout *gridLayout = new QGridLayout(this);
        QButtonGroup *buttonGroup = new QButtonGroup(this);
        buttonGroup->setExclusive(true); // 关键：启用互斥模式

        // 2. 动态生成4x4可选中按钮
        for (int row = 0; row < 4; ++row) {
            for (int col = 0; col < 4; ++col) {
                int id = row * 4 + col; // 计算唯一ID
                QPushButton *btn = new QPushButton(QString("Button %1").arg(id + 1));
                btn->setCheckable(true); // 允许选中状态
                gridLayout->addWidget(btn, row, col);
                buttonGroup->addButton(btn, id); // 加入按钮组

                // 3. 绑定点击事件：强制单选逻辑
                connect(btn, &QPushButton::clicked, this, [btn, buttonGroup]() {
                    // 清空所有选中状态后单独设置当前按钮
                    for (auto &b : buttonGroup->buttons()) b->setChecked(false);
                    btn->setChecked(true);
                });
            }
        }
        setLayout(gridLayout);

        // 4. 样式表：直观的状态反馈
        setStyleSheet(R"(
            QPushButton { 
                background-color: green;  /* 默认绿色 */
                border: 1px solid #000;  /* 黑色边框 */
                padding: 15px;           /* 增大点击区域 */
                font-weight: bold;
            }
            QPushButton:checked {
                background-color: red;    /* 选中时红色 */
            }
        )");
    }
};

关键技术解析

1. QButtonGroup的互斥性
   buttonGroup->setExclusive(true)是核心配置，确保组内按钮遵循单选逻辑。即使手动修改代码，Qt也会自动维护单选约束。

2. 动态按钮生成
   通过双重循环创建4×4网格：

   • setCheckable(true)：使按钮具有可选中特性
   • addButton(btn, id)：将按钮加入组并分配唯一ID，便于后续扩展（如通过ID获取选中项）

3. 精准的状态控制
   点击事件中的Lambda函数实现显式状态更新：

   [btn, buttonGroup]() {
       for (auto &b : buttonGroup->buttons()) b->setChecked(false);
       btn->setChecked(true);
   }
   

   这种写法避免了Qt默认机制中偶尔出现的状态抖动问题。

4. CSS样式表定制
   使用:checked伪状态实现视觉反馈：

   • 未选中：绿色背景 + 粗体文字
   • 选中：红色背景（覆盖绿色）
   • 统一黑色边框增强网格感

效果展示

• 初始状态：所有按钮为绿色网格
• 点击按钮：目标按钮变红，其他按钮立即恢复绿色
• 切换选择：新旧按钮自动完成颜色过渡，无视觉闪烁
• 布局特性：窗口缩放时按钮自动调整大小，保持网格结构

扩展应用场景

1. 游戏棋盘选择：如扫雷的初始难度选择

2. 数据矩阵操作：Excel式单元格标记

3. 动态配置界面：根据网格数量参数化构造函数：

   SingleSelectionButtonGrid(int rows, int cols, QWidget* parent=nullptr);
   

4. 自定义样式进阶：

   /* 添加悬停效果 */
   QPushButton:hover { background-color: lightgreen; }
   /* 禁用状态 */
   QPushButton:disabled { background-color: gray; }
   

总结

通过结合QGridLayout、QButtonGroup和Qt样式表，我们实现了：

• ✅ 严格的单选行为
• ✅ 直观的视觉反馈
• ✅ 灵活的布局扩展
• ✅ 简洁的样式定制