實現(xiàn)Qt單選按鈕網(wǎng)格：優(yōu)雅解決多選一交互需求

引言

在GUI開發(fā)中，經(jīng)常需要處理一組互斥選項的選擇（如模式切換、參數(shù)選擇等）。Qt的QButtonGroup結(jié)合網(wǎng)格布局能優(yōu)雅地實現(xiàn)這種需求。本文將解析一個4×4單選按鈕網(wǎng)格的實現(xiàn)，按鈕默認綠色，選中時變?yōu)榧t色，且同一時間只能選擇一個按鈕。

核心實現(xiàn)

以下代碼創(chuàng)建了自包含的SingleSelectionButtonGrid控件：

class SingleSelectionButtonGrid : public QWidget {
    Q_OBJECT
public:
    SingleSelectionButtonGrid(QWidget *parent = nullptr) : QWidget(parent) {
        // 1. 創(chuàng)建網(wǎng)格布局和按鈕組
        QGridLayout *gridLayout = new QGridLayout(this);
        QButtonGroup *buttonGroup = new QButtonGroup(this);
        buttonGroup->setExclusive(true); // 關(guān)鍵：啟用互斥模式

        // 2. 動態(tài)生成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); // 允許選中狀態(tài)
                gridLayout->addWidget(btn, row, col);
                buttonGroup->addButton(btn, id); // 加入按鈕組

                // 3. 綁定點擊事件：強制單選邏輯
                connect(btn, &QPushButton::clicked, this, [btn, buttonGroup]() {
                    // 清空所有選中狀態(tài)后單獨設(shè)置當(dāng)前按鈕
                    for (auto &b : buttonGroup->buttons()) b->setChecked(false);
                    btn->setChecked(true);
                });
            }
        }
        setLayout(gridLayout);

        // 4. 樣式表：直觀的狀態(tài)反饋
        setStyleSheet(R"(
            QPushButton { 
                background-color: green;  /* 默認綠色 */
                border: 1px solid #000;  /* 黑色邊框 */
                padding: 15px;           /* 增大點擊區(qū)域 */
                font-weight: bold;
            }
            QPushButton:checked {
                background-color: red;    /* 選中時紅色 */
            }
        )");
    }
};

關(guān)鍵技術(shù)解析

1. QButtonGroup的互斥性
   buttonGroup->setExclusive(true)是核心配置，確保組內(nèi)按鈕遵循單選邏輯。即使手動修改代碼，Qt也會自動維護單選約束。

2. 動態(tài)按鈕生成
   通過雙重循環(huán)創(chuàng)建4×4網(wǎng)格：

   • setCheckable(true)：使按鈕具有可選中特性
   • addButton(btn, id)：將按鈕加入組并分配唯一ID，便于后續(xù)擴展（如通過ID獲取選中項）

3. 精準(zhǔn)的狀態(tài)控制
   點擊事件中的Lambda函數(shù)實現(xiàn)顯式狀態(tài)更新：

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

   這種寫法避免了Qt默認機制中偶爾出現(xiàn)的狀態(tài)抖動問題。

4. CSS樣式表定制
   使用:checked偽狀態(tài)實現(xiàn)視覺反饋：

   • 未選中：綠色背景 + 粗體文字
   • 選中：紅色背景（覆蓋綠色）
   • 統(tǒng)一黑色邊框增強網(wǎng)格感

效果展示

• 初始狀態(tài)：所有按鈕為綠色網(wǎng)格
• 點擊按鈕：目標(biāo)按鈕變紅，其他按鈕立即恢復(fù)綠色
• 切換選擇：新舊按鈕自動完成顏色過渡，無視覺閃爍
• 布局特性：窗口縮放時按鈕自動調(diào)整大小，保持網(wǎng)格結(jié)構(gòu)

擴展應(yīng)用場景

1. 游戲棋盤選擇：如掃雷的初始難度選擇

2. 數(shù)據(jù)矩陣操作：Excel式單元格標(biāo)記

3. 動態(tài)配置界面：根據(jù)網(wǎng)格數(shù)量參數(shù)化構(gòu)造函數(shù)：

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

4. 自定義樣式進階：

   /* 添加懸停效果 */
   QPushButton:hover { background-color: lightgreen; }
   /* 禁用狀態(tài) */
   QPushButton:disabled { background-color: gray; }
   

總結(jié)

通過結(jié)合QGridLayout、QButtonGroup和Qt樣式表，我們實現(xiàn)了：

• ? 嚴(yán)格的單選行為
• ? 直觀的視覺反饋
• ? 靈活的布局?jǐn)U展
• ? 簡潔的樣式定制