QWidget 下互斥按钮的封装

QWidget 下互斥按钮的封装

介绍

Qt互斥按钮类，其继承自QRadioButton，能够实现一组按钮中只能选择一个的功能。可根据自身喜欢的样式组件去实现。这里提供一个思路。

设置互斥按钮类

继承自QRadioButton的新类，该类将具有互斥功能, 选中和非选中是不同的样式。

头文件

加QQ群 901201008 讨论交流

#ifndef MUTUALLYEXCLUSIVEBUTTON_H
#define MUTUALLYEXCLUSIVEBUTTON_H
#include <QRadioButton>

#include "ToolButtonWidget.h"

class MutuallyExclusiveButton : public QRadioButton
{
    Q_OBJECT
public:
    explicit MutuallyExclusiveButton(QWidget* parent = nullptr);
    ~MutuallyExclusiveButton();

    // 初始化按钮
    void initButton();

    void setButtonColor(const QString &buttonColor);
    QString buttonColor() const;

    void setButtonText(const QString &buttonText);
    QString iconQrcPath() const;

    void setIconQrcPath(const QString &iconQrcPath);
    QString buttonText() const;

    // 初始化QSS
    void initStyle();
    // 组合按钮
    virtual void combinationButton();

private:

    // 设置按钮颜色
    QString m_buttonColor;
    // icon的qrc路径
    QString m_iconQrcPath;
    // 设置按钮文字
    QString m_buttonText;

    // 按钮内置widget(这个是自己继承QWidget或者其他自己封装的组件)
    ToolButtonWidget* m_buttonWidget;
};

#endif // MUTUALLYEXCLUSIVEBUTTON_H

互斥按钮的实现

#include "MutuallyExclusiveButton.h"

#include <QHBoxLayout>
#include <QDebug>

MutuallyExclusiveButton::MutuallyExclusiveButton(QWidget *parent)
    :QRadioButton(parent),
      m_buttonWidget(new ToolButtonWidget)
{
    this->initButton();
}

MutuallyExclusiveButton::~MutuallyExclusiveButton()
{
    if(this->m_buttonWidget != nullptr){
        delete this->m_buttonWidget;
        this->m_buttonWidget = nullptr;
    }
}

void MutuallyExclusiveButton::initButton()
{
    // 去掉边框
    this->setWindowFlags(Qt::FramelessWindowHint);
    // 设置透明背景
    this->setAttribute(Qt::WA_TranslucentBackground);
}

void MutuallyExclusiveButton::setButtonColor(const QString &buttonColor)
{
    m_buttonColor = buttonColor;
}

void MutuallyExclusiveButton::setButtonText(const QString &buttonText)
{
    m_buttonText = buttonText;
}

void MutuallyExclusiveButton::setIconQrcPath(const QString &iconQrcPath)
{
    m_iconQrcPath = iconQrcPath;
}

void MutuallyExclusiveButton::initStyle()
{
    // 将 QSS 样式字符串赋值给 btn_qss
    const QString btn_qss = QString(
        "QRadioButton::indicator {"
        "    border: none;"
        "    width: 0px;"
        "    height: 0px;"
        "}"
        "/* 未选中状态下的样式 */"
        "QRadioButton:unchecked {"
        "    border: 0px; /* 设置边框为0，隐藏方框 */"
        "    background-color: transparent; /* 设置背景为透明颜色 */"
        "}"
        "QRadioButton {"
        "    background-color: transparent; /* 设置背景为透明颜色 */"
        "}"
        "/* 选中状态下的样式 */"
        "QRadioButton:checked {"
        "    border: 2px solid %1; /* 设置边框为2像素，颜色为#00879C */"
        "}").arg(this->m_buttonColor);
    this->setStyleSheet(btn_qss);
}

void MutuallyExclusiveButton::combinationButton()
{
    this->m_buttonWidget->setButtonColor(m_buttonColor);
    this->m_buttonWidget->setLabel(this->m_buttonText);
    this->m_buttonWidget->setIconQrcPath(this->m_iconQrcPath);

    // 创建 QHBoxLayout 来将 m_toolButtonWidget 居中放置在 ui->radioButton 中
    QHBoxLayout *layout = new QHBoxLayout(this);
    layout->addWidget(m_buttonWidget);  // 将 m_toolButtonWidget 添加到布局
    layout->setContentsMargins(1, 1, 1, 1);  // 设置布局的边距为0，确保没有间距
    layout->setAlignment(Qt::AlignCenter);  // 将 m_toolButtonWidget 居中对齐

    // 确保 m_toolButtonWidget 的大小是固定的
    this->m_buttonWidget->setFixedSize(m_buttonWidget->width(), m_buttonWidget->height());
    this->m_buttonWidget->initStyle();
}

QString MutuallyExclusiveButton::buttonColor() const
{
    return m_buttonColor;
}

QString MutuallyExclusiveButton::iconQrcPath() const
{
    return m_iconQrcPath;
}

QString MutuallyExclusiveButton::buttonText() const
{
    return m_buttonText;
}

// ToolButtonWidget 类是自己继承QWidget去封装的，将该控件通过布局管理器放入
// MutuallyExclusiveButton按钮中即可实现不同样式的互斥按钮的封装，可以通过一
// 些接口去获取按钮图标或者按钮作用文字。
# 最重要的是QSS要进行美化，选中的样式和没有选中的样式即可实现不同按钮间单选的互斥的功能。

最终展示结果