利用QPushButton和QButtonGroup实现导航按钮_qbuttongroup qpushbutton-优快云博客

先看看效果：
在这里插入图片描述
利用QButtonGroup实现按钮的互斥选中。

取消选择，和选择第二个（可以通过参数控制选择哪个按钮）

ui文件：
在这里插入图片描述
左侧的按钮都需要设置为Checkable

或者代码里去设置

//    在ui文件里设置也是一样的效果，ui文件里勾选checkable
    ui->homePushButton->setCheckable(true);
    ui->savePushButton->setCheckable(true);
    ui->printPushButton->setCheckable(true);
    ui->settingPushButton->setCheckable(true);

我把代码都贴出来，注释写得比较清楚，大家看看代码应该清楚。
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QButtonGroup>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    void initButtonGroup();

    void loadqss();

private slots:
    void onButtonClicked(int id);

private:
    Ui::Widget *ui;

    QButtonGroup m_buttonGroup;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <QFile>
#include <QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    initButtonGroup();

    loadqss();

//    在ui文件里设置也是一样的效果，ui文件里勾选checkable
//    ui->homePushButton->setCheckable(true);
//    ui->savePushButton->setCheckable(true);
//    ui->printPushButton->setCheckable(true);
//    ui->settingPushButton->setCheckable(true);


    connect(ui->unSelectedPushButton, &QAbstractButton::clicked, this, [this](){
        QAbstractButton *pCheckedButton = m_buttonGroup.checkedButton();
        if (pCheckedButton != nullptr) //如果没有任何按钮被选中，这里得到的是nullptr，所以要加判断
        {
            //直接设置pCheckedButton->setChecked(false);没有效果，先setExclusive(false)，后面再setExclusive(true)才有效
            m_buttonGroup.setExclusive(false);
            pCheckedButton->setChecked(false);
            m_buttonGroup.setExclusive(true);
        }
    });

    //默认选择第二个按钮，你可以把参数传入进去，控制选择第几个按钮
    connect(ui->selectedSecondPushButton, &QAbstractButton::clicked, this, [this](){
        QAbstractButton *pButton = m_buttonGroup.button(1);
        if (pButton != nullptr) //如果你的参数不对，这里得到的是nullptr
        {
            pButton->setChecked(true);
        }
    });

//    以下两种写法都可以，第一种是Qt5中新增的写法，第二种是Qt4中的写法
//    connect(&m_buttonGroup, QOverload<int>::of(&QButtonGroup::buttonClicked), [=](int id){
//        qDebug() << "clicked id: " << id;
//    });

    connect(&m_buttonGroup, SIGNAL(buttonClicked(int)), this, SLOT(onButtonClicked(int)));
}

Widget::~Widget()
{
    delete ui;
}

void Widget::initButtonGroup()
{
    m_buttonGroup.addButton(ui->homePushButton, 0);
    m_buttonGroup.addButton(ui->savePushButton, 1);
    m_buttonGroup.addButton(ui->printPushButton, 2);
    m_buttonGroup.addButton(ui->settingPushButton, 3);

    m_buttonGroup.setExclusive(true);
}

void Widget::loadqss()
{
    QFile file(":/qss/style.qss");
    file.open(QFile::ReadOnly);
    QByteArray allData = file.readAll();
    this->setStyleSheet(QString(allData));
}

void Widget::onButtonClicked(int id)
{
    qDebug() << "clicked id: " << id;
}

style.qss

QWidget#leftWidget {
    background-color: #3D433E;
}

QPushButton {
    background-color: transparent;
    background-origin: content;
    background-position: top;
    padding-top: 8px;
    background-repeat: no-repeat;
    text-align: bottom;
    padding-bottom: 8px;
    font-family: Microsoft YaHei;
    font-size: 12px;
    color: #979797;
}

QPushButton:checked {
    background-color: #303531;
    background-origin: content;
    background-position: top;
    padding-top: 8px;
    background-repeat: no-repeat;
    text-align: bottom;
    padding-bottom: 8px;
    font-family: Microsoft YaHei;
    font-size: 12px;
    color: #FFFFFF;
}

QPushButton#homePushButton {
    background-image: url(:/images/home_small.png);
}

QPushButton#homePushButton:checked {
    background-image: url(:/images/home_small.png);
}

QPushButton#savePushButton {
    background-image: url(:/images/save_small.png);
}

QPushButton#savePushButton:checked {
    background-image: url(:/images/save_small.png);
}

QPushButton#printPushButton {
    background-image: url(:/images/print_small.png);
}

QPushButton#printPushButton:checked {
    background-image: url(:/images/print_small.png);
}

QPushButton#settingPushButton {
    background-image: url(:/images/setting_small.png);
}

QPushButton#settingPushButton:checked {
background-image: url(:/images/setting_small.png);
}

QPushButton#unSelectedPushButton, QPushButton#selectedSecondPushButton
{
    background: #60C171;
    border: 1px solid #48B978;
    border-radius: 15px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    color: #FFFFFF;
    padding-top: 4px;
    padding-bottom: 5px;
}