Qt之按钮部件的理解使用与样式优化（QPushButtn、QToolButton、QRadioButton、QCheckBox、QCommandLinkButton、QDialogButtonBox）

浅笑一斤

已于 2022-12-15 16:23:10 修改

阅读量2k

点赞数

分类专栏： qt 文章标签： qt 开发语言

于 2022-09-09 13:42:54 首次发布

本文链接：https://blog.csdn.net/linyibin_123/article/details/126781244

版权

qt 专栏收录该内容

37 篇文章 22 订阅

订阅专栏

1.QPushButton （通用按钮）

用来给用户点击，来完成某种动作的控件，一般是矩形，一般作为登录按钮，注册按钮，关闭按钮
常用方法：
void setText(const QString &text) 设置按钮文本
QString text() const 返回按钮上的文本
void setIcon(const QIcon &icon) 设置按钮图表
QIcon icon() const; 返回按钮图表
void setMenu(QMenu* menu) 设置菜单
void setFlat(bool); 设置按钮是否有边框，默认false表示有，true表示无
void setCheckable(bool) 默认是false为触发式按钮，true为切换按钮(可以使用toggled(bool)信号)
move(int x, int y) 指定按钮基于父窗口的位置
void setDisabled(bool) 禁用按钮
void setEnabled(bool) 可用按钮
信号槽：
1）信号
pressed() 按钮按下时触发
released() 按钮松开时触发
clicked(bool checked = false) 按钮按下并松开后触发
toggled(bool checked) 只有当切换按钮被按下时才会触发此信号
2）槽
click() 单击按钮
toggle() 单击切换按钮
setIconSize(const QSize &size) 设置图表大小
setChecked(bool) 设置按钮是否被选中
setMenu(QMenu *menu) 设置菜单

样式css:
hover \ pressed \ !enabled

2.QToolButton （图标按钮）

通常在工具栏内部使用，一般不显示文本标签，只显示一个图标
常用方法：
setIcon() //设置图标
setToolButtonStyle(Qt::ToolButtonIconOnly)//设置只显示图标

3.QRadioButton (单选按钮)

提供了一个带有文本标签的单选框（单选按钮
使用 QButtonGroup 可以把一组 QRadioButton 控件进行统一管理，不要挨个设置信号槽的连接，同时可以拥有多组单选配置

4.QCheckBox (复选框)

是一个选项按钮,可以打开(选中)或关闭(取消选中)。复选框中按钮的启用与禁止不会对其它按钮造成任何影响
使用 QButtonGroup 可以把一组 QRadioButton 控件进行统一管理

5.QCommandLinkButton （命令链接按钮）

作为向导和对话框中单选按钮的替代选项
是个支持2行文字显示、缺省带箭头图标
扁平化外观、内部功能与PushButton类似的按钮，其设计用于windows下替换页面上的next按钮

6.QDialogButtonBox

一个包含很多按钮的控件，在对话框中有多个按钮需要分组排列的按钮时，可以使用QDialogButtongBox类
可以通过standardbuttons设置
4种信号，分别是accepted、rejected、clicked和helpRequested

代码：

widgetbuttons.h

#ifndef WIDGETBUTTONS_H
#define WIDGETBUTTONS_H

#include <QWidget>

namespace Ui {
class WidgetButtons;
}

class WidgetButtons : public QWidget
{
    Q_OBJECT

public:
    explicit WidgetButtons(QWidget *parent = nullptr);
    ~WidgetButtons();

    //QPushButton
    void initPushButton();

    //QToolButton
    void initToolButton();

    //QRadioButton
    void initRadioButton();

    //QCheckBox
    void initCheckBox();

    //QCommandLinkButton
    void initCommandLinkBtn();

    //QDialogButtongBox
    void initDialogButtonBox();

protected:
    void changeEvent(QEvent* event);

private:
    void retranslateUi();

private slots:
    //QToolButton
    void on_toolButton_left_clicked();
    void on_toolButton_right_clicked();

    //QRadioButton
    //单组简单方式可以直接用多个信号槽处理
    /*
    void on_radioButton_first_toggled(bool checked);
    void on_radioButton_sencond_toggled(bool checked);
    void on_radioButton_third_toggled(bool checked);
    */
    //QCommandLinkButton
    void on_commandLinkButton_clicked();

    //QCommandLinkButton
    void on_buttonBox_accepted();

    void on_buttonBox_rejected();

private:
    Ui::WidgetButtons *ui;
};

#endif // WIDGETBUTTONS_H

widgetbuttons.cpp

#include "widgetbuttons.h"
#include "ui_widgetbuttons.h"
#include <QAction>
#include "commondef.h"
#include <QMenu>
#include <QButtonGroup>

WidgetButtons::WidgetButtons(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::WidgetButtons)
{
    ui->setupUi(this);
    initPushButton();
    initToolButton();
    initRadioButton();
    initCheckBox();

    initCommandLinkBtn();

    retranslateUi();

}

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

/*************************
 * QPushButton
 * ***********************/
void WidgetButtons::initPushButton()
{
    ui->Btn_Test->setText(tr("Test Button"));
    ui->Btn_Test->setIcon(QIcon(":/Resource/Image/WidgetButtons/icon_restart.png"));
    ui->Btn_Test->setIconSize(QSize(18,18));

    ui->Btn_Test2->setText(tr("Test Button2"));
    QMenu *menu = new QMenu();
    menu->addAction("AAA");
    menu->addAction("BBB");
    menu->addAction("CCC");
    ui->Btn_Test2->setMenu(menu);
    //绑定信号槽
    connect(ui->Btn_Test2, &QPushButton::pressed, ui->Btn_Test2, &QPushButton::hide);

}

/*************************
 * QToolButton
 * ***********************/
void WidgetButtons::initToolButton()
{
    //设置图标
    ui->toolButton_left->setIcon(QIcon(":/Resource/Image/WidgetButtons/left.png"));
    ui->toolButton_left->setIconSize(QSize(20, 20));
    ui->toolButton_left->setToolButtonStyle(Qt::ToolButtonIconOnly);
    //ui->toolButton_left->setText(tr("Back"));
    //设置提示
    ui->toolButton_left->setToolTip(tr("Back"));

    //设置图标
    ui->toolButton_right->setIcon(QIcon(":/Resource/Image/WidgetButtons/right.png"));
    //ui->toolButton_left->setText(tr("Forward"));
    ui->toolButton_right->setIconSize(QSize(20, 20));
    ui->toolButton_right->setToolButtonStyle(Qt::ToolButtonIconOnly);
    //设置提示
    ui->toolButton_right->setToolTip(tr("Forward"));
}

void WidgetButtons::on_toolButton_left_clicked()
{
    MY_DEBUG << "Back";
}

void WidgetButtons::on_toolButton_right_clicked()
{
    MY_DEBUG << "Forward";
}

/*************************
 * QRadioButton
 * ***********************/
void WidgetButtons::initRadioButton()
{
    QButtonGroup * pGroup = new QButtonGroup(this);
    pGroup->addButton(ui->radioButton_first, 0);
    pGroup->addButton(ui->radioButton_sencond, 1);
    pGroup->addButton(ui->radioButton_third, 2);

    pGroup->button(0)->setChecked(true);

    //设置互斥
    pGroup->setExclusive(true);

    //Toggled 信号
    connect(pGroup, static_cast<void(QButtonGroup::*)(int, bool)>(&QButtonGroup::buttonToggled), [&](int index, bool checked) {
        qDebug() << "Toggeld Index: " << index << "Status: " << checked;
    });

    //Clicked 信号
    connect(pGroup, static_cast<void(QButtonGroup::*)(int)>(&QButtonGroup::buttonClicked), [&](int index) {
        qDebug() << "Click Index: " << index  ;
    });

    MY_DEBUG << "First Radio Status:" << ui->radioButton_first->isChecked();
}

/*
void WidgetButtons::on_radioButton_first_toggled(bool checked)
{
    Q_UNUSED(checked)
    MY_DEBUG << "First";
}

void WidgetButtons::on_radioButton_sencond_toggled(bool checked)
{
    Q_UNUSED(checked)
    MY_DEBUG << "Second";
}

void WidgetButtons::on_radioButton_third_toggled(bool checked)
{
    Q_UNUSED(checked)
    MY_DEBUG << "Third";
}
*/

/*************************
 * QCheckBox
 * ***********************/
void WidgetButtons::initCheckBox()
{
    QButtonGroup * pGroup = new QButtonGroup(this);
    pGroup->addButton(ui->checkBox_first, 0);
    pGroup->addButton(ui->checkBox_second, 1);
    pGroup->addButton(ui->checkBox_third, 2);

    pGroup->setExclusive(false);  //允许多选

    pGroup->button(0)->setChecked(true);
    pGroup->button(1)->setChecked(true);

    MY_DEBUG << "First CheckBox Status:" << ui->checkBox_first->isChecked();
    MY_DEBUG << "Second CheckBox Status:" << ui->checkBox_second->isChecked();
}

/*************************
 * QCommandLinkButton
 * ***********************/
void WidgetButtons::initCommandLinkBtn()
{
    ui->commandLinkButton->setText(tr("Submit"));
    ui->commandLinkButton->setDescription(tr("To Submit Content"));
    //ui->commandLinkButton->setIcon(QIcon(":/Resource/Image/WidgetButtons/right.png"));
}

void WidgetButtons::on_commandLinkButton_clicked()
{
    MY_DEBUG << "CommandLinkButton Click";
}


void WidgetButtons::initDialogButtonBox()
{
}

/*************************
 * QDialogButtonBox
 * ***********************/
void WidgetButtons::on_buttonBox_accepted()
{
    MY_DEBUG << "accepted";
}

void WidgetButtons::on_buttonBox_rejected()
{
    MY_DEBUG << "rejected";
}

///

void WidgetButtons::changeEvent(QEvent *event)
{
    switch(event->type())
    {
        case QEvent::LanguageChange:
            retranslateUi();
            break;
        default:
            QWidget::changeEvent(event);
    }
}

void WidgetButtons::retranslateUi()
{
    ui->Btn_Test->setText(tr("Test"));
    ui->Btn_Test2->setText(tr("Test2"));
    ui->toolButton_left->setText(tr("Back"));
    ui->toolButton_right->setText(tr("Forward"));
    ui->radioButton_first->setText(tr("First"));
    ui->radioButton_sencond->setText(tr("Second"));
    ui->radioButton_third->setText(tr("Third"));
    ui->checkBox_first->setText(tr("First"));
    ui->checkBox_second->setText(tr("Second"));
    ui->checkBox_third->setText(tr("Third"));
    ui->commandLinkButton->setText(tr("Submit"));
    ui->commandLinkButton->setDescription(tr("To Submit Content"));

    //buttonbox的按钮翻译可以通过手动设置
    //ui->buttonBox->button(QDialogButtonBox::Ok)->setText(tr("确定"));
    //ui->buttonBox->button(QDialogButtonBox::Cancel)->setText(tr("取消"));
}

样式优化

/*************************
 * Buttons
 * ***********************/
/*pushbutton*/
WidgetButtons QLabel
{
    color：white;
    font-size:18px;
}

WidgetButtons QPushButton#Btn_Test, QPushButton#Btn_Test2
{
    /*border-left:5px solid transparent;*/
    background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #05b183, stop:1 #056cbd);
    /*background-image:url(":Resource/Image/WidgetButtons/icon_restart.png");*/
    padding-left:22px;
    padding-right:10px;
    border-radius:4px;
    background-position:left;
    background-repeat:no-repeat;
    min-width:60px;
    min-height:30px;
    color:white;

}
WidgetButtons QPushButton#Btn_Test:pressed, QPushButton#Btn_Test2:pressed
{
     background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #02e293, stop:1 #0280e5);
}

WidgetButtons QPushButton#Btn_Test:hover, QPushButton#Btn_Test2:hover
{
    background-color:rgb(0,203,255);
    border-style:inset;
}

WidgetButtons QPushButton#Btn_Test:!enabled, QPushButton#Btn_Test2:!enabled
{
    background-color:grey;
    border-style:inset;
}

WidgetList QPushButton, WidgetTree QPushButton, WidgetTable QPushButton, WidgetContainers QPushButton,
WidgetDisplay QPushButton, WidgetUndoView QPushButton
{
    /*border-left:5px solid transparent;*/
    background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #05b183, stop:1 #056cbd);
    background-image:url(":Resource/Image/WidgetButtons/icon_restart.png");
    padding-left:22px;
    padding-right:10px;
    border-radius:4px;
    background-position:left;
    background-repeat:no-repeat;
    min-width:60px;
    min-height:30px;
    color:white;
}
WidgetList QPushButton:pressed, WidgetTree QPushButton:pressed, WidgetTable QPushButton:pressed,
WidgetContainers QPushButton:pressed, WidgetDisplay QPushButton:pressed, WidgetUndoView QPushButton:pressed
{
     background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #02e293, stop:1 #0280e5);
}

WidgetList QPushButton:hover,  WidgetTree QPushButton:hover, WidgetTable QPushButton:hover,
WidgetContainers QPushButton:hover, WidgetDisplay QPushButton:hover, WidgetUndoView QPushButton:hover
{
    background-color:rgb(0,203,255);
    border-style:inset;
}



/*toolbutton*/
QToolButton
{
    border: none;
    background: none;
    color: white;
}

QToolButton#toolButton_left:hover
{
    border-image:url(":/Resource/Image/WidgetButtons/left_h.png");
}

QToolButton#toolButton_right:hover
{
    border-image:url(":/Resource/Image/WidgetButtons/right_h.png");
}

/*QRadioButton*/
QRadioButton::unchecked
{
    color:white;
}
QRadioButton::checked
{
    color:#009cff;
}

QRadioButton::indicator
{
    width: 13px;
    height: 13px;
}
QRadioButton::indicator::unchecked
{
    image: url(":/Resource/Image/WidgetButtons/btn_radio.png");

}
QRadioButton::indicator::checked
{
    image: url(":/Resource/Image/WidgetButtons/btn_radio_checked.png");
}

/*QCheckBox*/
QCheckBox
{
    font-size:12px;
    color:white;
}
QCheckBox::indicator:unchecked
{
     image:url(:Resource/Image/WidgetButtons/checkbox_unselect.png);
}
QCheckBox::indicator:checked
{
     image:url(:Resource/Image/WidgetButtons/checkbox_select.png);
}

/*QCommandLinkButton*/

QCommandLinkButton#commandLinkButton
{
    color:white;
    padding-left:22px;
    padding-right:10px;
    border-radius:4px;
    background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #05b183, stop:1 #056cbd);
}

QCommandLinkButton#commandLinkButton:hover
{
    background-color:rgb(0,203,255);
    border-style:inset;
}

QCommandLinkButton#commandLinkButton:pressed
{
     background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #02e293, stop:1 #0280e5);
}

/*QDialogButtonBox*/
/*
QPushButton
{
    color:white;
    padding-left:22px;
    padding-right:10px;
    border-radius:4px;
    background-color:qlineargradient(x1:0, y1:0, x2:1, y2:1,stop:0 #05b183, stop:1 #056cbd);
}

QPushButton:hover
{
    background-color:rgb(0,203,255);
    border-style:inset;
}*/

实现效果：

在这里插入图片描述

工程路径下载：

https://download.csdn.net/download/linyibin_123/86512679

浅笑一斤

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Qt之按钮部件的理解使用与样式优化（QPushButtn、QToolButton、QRadioButton、QCheckBox、QCommandLinkButton、QDialogButtonBox）

Qt之按钮部件的理解使用与样式优化（QPushButtn、QToolButton、QRadioButton、QCheckBox、QCommandLinkButton、QDialogButtonBox），提供工程下载
复制链接

扫一扫