正点原子QT之按钮

4. 按钮

（1） QPushButton:下压按钮
（2） QToolButton:工具按钮
（3） QRadioButton:选择按钮
（4） QCheckBox:检查框
（5） QCommandLinkButton:命令链接按钮
（6） QDialogButtonBox:对话框按钮

4.1. QPushButton:下压按钮

QPushButton 继承 QAbstractButton 类，被 QCommandLinkButton 继承。通常用于执行命令或触发事件。

案例：通过单击不同的按钮，改变窗口的颜色

例 04_qpushbutton 窗口换肤（难度：简单），通过单击不同的按钮，改变窗口的颜色。

cpp

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
/* 引入QPushButton类 */
#include <QPushButton>

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    /* 声明一个QPushButton对象pushButton1 */
    QPushButton *pushButton1;
    /* 声明一个QPushButton对象pushButton2 */
    QPushButton *pushButton2;

private slots:
    /* 声明对象pushButton1的槽函数 */
    void pushButton1_Clicked();
    /* 声明对象pushButton2的槽函数 */
    void pushButton2_Clicked();
};
#endif // MAINWINDOW_H

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置宽高为800×480,位置在0, 0。（0, 0）代表原点，Qt默认最左上角的点为原点 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化两个按钮对象，并设置其显示文本为窗口皮肤1和窗口皮肤2 */
    pushButton1 = new QPushButton("窗口皮肤1", this);
    pushButton2 = new QPushButton("窗口皮肤2", this);

    /* 设定两个QPushButton对象的位置 */
    pushButton1->setGeometry(300,200,80,40);
    pushButton2->setGeometry(400,200,80,40);

    /* 信号槽连接 */
    connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
    connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
}

MainWindow::~MainWindow()
{
}

/* 槽函数的实现 */
void MainWindow::pushButton1_Clicked()
{
    /* 设置主窗口的样式1 */
    this->setStyleSheet("QMainWindow { background-color: rgba(255, 245, 238, 100%); }");
}

/* 槽函数的实现 */
void MainWindow::pushButton2_Clicked()
{
    /* 设置主窗口的样式2 */
    this->setStyleSheet("QMainWindow { background-color: rgba(238, 122, 233, 100%); }");
}

4.2. QToolButton:工具按钮

工具按钮（QToolButton）区别于普通按钮（QPushButton）的一点是，工具按钮（QToolButton）可以带图标。这里区别下图标和按钮的背景图片是不一样的。
通常我们在 QToolBar 这种工具条（工具栏）上设置不同的按钮，如果这些按钮还带图标和文本，那么 QToolButton 是个不错的选择。

QToolButton 继承 QAbstractButton 类。是一种用于命令或者选项的可以快速访问的按钮，通常在 ToolBar 里面。工具按钮通常显示的是图标，而不是文本标签。 ToolButton 支持自动浮起。在自动浮起模式中，按钮只有在鼠标指向它的时候才绘制三维的框架。

案例：自定义工具栏

例 05_qtoolbutton 自定义工具栏（难度：简单）。

cpp

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
/* 引入QToolButton类 */
#include <QToolButton>
/* 引入QToolBar类 */
#include <QToolBar>

class MainWindow : public QMainWindow
{
    Q_OBJECT

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

private:
    /* 声明一个QToolButton对象 */
    QToolButton *toolButton;
    /* 声明一个QToolBar对象 */
    QToolBar *toolBar;
};
#endif // MAINWINDOW_H

cpp

#include "mainwindow.h"
#include <QApplication>
#include <QStyle>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 设置主窗体的位置和大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化QToolBar对象 */
    toolBar = new QToolBar(this);
    /* 设置toolBar的位置和大小 */
    toolBar->setGeometry(0, 0, 800, 100);

    /* 实例化QStyle类对象，用于设置风格，调用系统类自带的图标 */
    QStyle *style = QApplication::style();

    /* 使用Qt自带的标准图标，可以在帮助文档里搜索QStyle::StandardPixmap */
    QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);

    /* 实例化QToolButton对象 */
    toolButton = new QToolButton();

    /* 设置图标 */
    toolButton->setIcon(icon);
    /* 设置要显示的文本 */
    toolButton->setText("帮助");
    /* 调用setToolButtonStyle()方法，设置toolButoon的样式，设置为文本置于图标下方 */
    toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

    /* 最后将toolButton添加到ToolBar里 */
    toolBar->addWidget(toolButton);
}

MainWindow::~MainWindow()
{
}

4.3. QRadioButton:选择按钮

QRadioButton 部件提供了一个带有文本标签的单选框（单选按钮）。
QRadioButton 是一个可以切换选中（checked）或未选中（unchecked）状态的选项按钮。
单选框通常呈现给用户一个“多选一”的选择。也就是说，在一组单选框中，一次只能选中一个单选框。默认在同一个父对象下，初始化后点击它们是互斥状态。

QRadioButton 继承 QAbstractButton 类。 RadioButton 单选按钮（单选框）通常成组出现，用于提供两个或多个互斥选项。

案例: 仿手机开关效果

例 06_radiobutton 仿手机开关效果（难度：中等）

资源文件

<RCC>
    <qresource prefix="/">
        <file>images/switch_off.png</file>
        <file>images/switch_on.png</file>
        <file>style.qss</file>
    </qresource>
</RCC>

QRadioButton{
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    image: url(:/images/switch_off.png);
}
QRadioButton::indicator:checked {
    image: url(:/images/switch_on.png);
}

main

cpp

#include "mainwindow.h"

#include <QApplication>
/* 引入QFile */
#include <QFile>

int main(int argc, char *argv[])
{
  QApplication a(argc, argv);
  /* 指定文件 */
  QFile file(":/style.qss");

  /* 判断文件是否存在 */
  if (file.exists() ) {
      /* 以只读的方式打开 */
      file.open(QFile::ReadOnly);
      /* 以字符串的方式保存读出的结果 */
      QString styleSheet = QLatin1String(file.readAll());
      /* 设置全局样式 */
      qApp->setStyleSheet(styleSheet);
      /* 关闭文件 */
      file.close();
  }
  MainWindow w;
  w.show();
  return a.exec();
}

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小 */
    this->setGeometry(0, 0, 800, 480);
    this->setStyleSheet("QMainWindow {background-color: rgba(200, 50, 100, 100%);}");

    /* 实例化对象 */
    radioButton1 = new QRadioButton(this);
    radioButton2 = new QRadioButton(this);

    /* 设置两个QRadioButton的位置和显示大小 */
    radioButton1->setGeometry(300, 200, 100, 50);
    radioButton2->setGeometry(400, 200, 100, 50);

    /* 设置两个QRadioButton的显示文本 */
    radioButton1->setText("开关一");
    radioButton2->setText("开关二");

    /* 设置初始状态，radioButton1的Checked为false,另一个为true*/
    radioButton1->setChecked(false);
    radioButton2->setChecked(true);
}

MainWindow::~MainWindow()
{
}

4.4. QCheckBox:检查框

QCheckBox 继承 QAbstractButton。复选按钮（复选框）与 RadioButton 的区别是选择模式，单选按钮提供多选一，复选按钮提供多选多

案例：三态选择框

例 07_qcheckbox，三态选择框（难度：简单）。使用一个 QCheckBox，用户通过点击可改变当选择框的状态。选中，半选，未选中

样式

QCheckBox{
        spacing: 5px;
        color: white;
}
QCheckBox::indicator {
        width: 50px;
        height: 50px;
}
QCheckBox::indicator:enabled:unchecked {
        image: url(:/images/unchecked.png);
}
QCheckBox::indicator:enabled:checked {
        image: url(:/images/checked.png);
}
QCheckBox::indicator:enabled:indeterminate {
        image: url(:/images/indeterminate.png);
}

main

cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小及背景颜色 */
    this->setGeometry(0, 0, 800, 480);
    this->setStyleSheet("QMainWindow {background-color: rgba(100, 100, 100, 100%);}");

    /* 实例化对象 */
    checkBox = new QCheckBox(this);

    /* 设置QCheckBox位置和显示大小 */
    checkBox->setGeometry(350, 200, 250, 50);

    /* 初始化三态复选框的状态为Checked */
    checkBox->setCheckState(Qt::Checked);

    /* 设置显示的文本 */
    checkBox->setText("初始化为Checked状态");

    /* 开启三态模式，必须开启，否则只有两种状态，即Checked和Unchecked */
    checkBox->setTristate();

    /* 连接checkBox的信号stateChanged(int)，与我们定义的槽checkBoxStateChanged(int)连接 */
    connect(checkBox, SIGNAL(stateChanged(int)), this, SLOT(checkBoxStateChanged(int)));
}

MainWindow::~MainWindow()
{
}

/* 槽函数的实现 */
void MainWindow::checkBoxStateChanged(int state)
{
    /* 判断checkBox的state状态，设置checkBox的文本 */
    switch (state) {
    case Qt::Checked:
        /* 选中状态 */
        checkBox->setText("Checked状态");
        break;
    case Qt::Unchecked:
        /* 未选中状态 */
        checkBox->setText("Unchecked状态");
        break;
    case Qt::PartiallyChecked:
        /* 半选状态 */
        checkBox->setText("PartiallyChecked状态");
        break;
    default:
        break;
    }
}

4.5. QCommandLinkButton:命令链接按钮

QCommandLinkButton 控件中文名是“命令链接按钮”。 QCommandLinkButton 继承 QPushButton。 QCommandLinkButton 控件和 RadioButton 相似，都是用于在互斥选项中选择一项。表面上同平面按钮一样，但是 CommandLinkButton 除带有正常的按钮上的文字描述文本外，默认情况下，它也将携带一个箭头图标，表明按下按钮将打开另一个窗口或页面。

案例：链接窗口

例 08_qcommandlinkbutton 链接窗口（难度：简单）。使用一个 QCommandLinkButton，点击打开系统的窗口。

点击中间的打开/home 目录按钮，结果如下。系统弹出一个窗口，直接打开到/home 目录

cpp

#include "mainwindow.h"
/* 引入桌面服务，用来打开系统文件夹对话框 */
#include <QDesktopServices>
/* 引入QUrl */
#include <QUrl>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化对象 */
    commandLinkButton = new QCommandLinkButton(
                "打开/home目录", "点击此将调用系统的窗口打开/home目录",this);

    /* 设置QCommandLinkButton位置和显示大小 */
    commandLinkButton->setGeometry(300, 200, 250, 60);

    /* 信号槽连接 */
    connect(commandLinkButton, SIGNAL(clicked()), this,
            SLOT(commandLinkButtonClicked()));
}

MainWindow::~MainWindow()
{
}

void MainWindow::commandLinkButtonClicked()
{
    /* 调用系统服务打开/home目录 */
    QDesktopServices::openUrl(QUrl("file:////home/") );
}

4.6. QDialogButtonBox:对话框按钮

对话框和消息框通常以符合该平台界面指导原则的布局呈现按钮。不同平台的对话框总是有不同的布局。
QDialogButtonBox 允许开发人员向其添加按钮，并将自动使用适合用户桌面环境的布局。 
也就是说我们可以使用系统的自带的对话框按钮，也可以自己定义对话框按钮。

button_Box = new QDialogButtonBox(QDialogButtonBox::Ok
                            | QDialogButtonBox::Cancel
                            | QDialogButtonBox::Open
                            | QDialogButtonBox::Save
                            | QDialogButtonBox::Close
                            | QDialogButtonBox::Discard
                            | QDialogButtonBox::Apply
                            | QDialogButtonBox::Reset
                            | QDialogButtonBox::RestoreDefaults
                            | QDialogButtonBox::Help
                            | QDialogButtonBox::SaveAll);

QDialogButtonBox 按钮盒子（按钮框），是由 QDialogButtonBox 类包装成的。QDialogButtonBox 继承 QWidget。常用于对话框里自定义按钮，比如“确定”和“取消” 按钮。

案例：

例 09_qdialogbuttonbox，自定义 QDialogButtonBox 里的按钮（难度：简单）。使用一个QDialogButtonBox，在 QDialogButtonBox 添加 Qt 提供的按钮，或者自定义按钮。

cpp

#include "mainwindow.h"
/* 引入QDebug */
#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    /* 主窗体设置位置和显示的大小 */
    this->setGeometry(0, 0, 800, 480);

    /* 实例化并设置按钮的盒子的大小和位置 */
    dialogButtonBox = new  QDialogButtonBox(this);
    dialogButtonBox->setGeometry(300, 200, 200, 30);

    /*使用Qt的Cancel按钮*/
    dialogButtonBox->addButton(QDialogButtonBox::Cancel);

    /*将英文"Cancel"按钮设置为中文"取消" */
    dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");

    /* 设定位置与大小 */
    pushButton = new QPushButton(tr("自定义"));

    /* 将pushButton添加到dialogButtonBox，并设定ButtonRole为ActionRole */
    dialogButtonBox->addButton(pushButton, QDialogButtonBox::ActionRole);

    /* 信号槽连接，带参数QAbstractButton *，用于判断用户点击哪个按键 */
    connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),
            this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
}

MainWindow::~MainWindow()
{
}

void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
{
    /* 判断点击的对象是否为QDialogButtonBox::Cancel */
    if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
        /* 打印“单击了取消键” */
        qDebug() <<"单击了取消键"<<endl;
        /* 判断点击的对象是否为pushButton */
    }else if(button == pushButton) {
        /* 打印“单击了自定义键” */
        qDebug() <<"单击了自定义键"<<endl;
    }
}

正点原子QT之按钮 ​

4. 按钮 ​

4.1. QPushButton:下压按钮 ​

案例：通过单击不同的按钮，改变窗口的颜色 ​

4.2. QToolButton:工具按钮 ​

案例：自定义工具栏 ​

4.3. QRadioButton:选择按钮 ​

案例: 仿手机开关效果 ​

资源文件 ​

main ​

4.4. QCheckBox:检查框 ​

案例：三态选择框 ​

样式 ​

main ​

4.5. QCommandLinkButton:命令链接按钮 ​

案例： 链接窗口 ​

4.6. QDialogButtonBox:对话框按钮 ​

案例： ​

正点原子QT之按钮

4. 按钮

4.1. QPushButton:下压按钮

案例：通过单击不同的按钮，改变窗口的颜色

4.2. QToolButton:工具按钮

案例：自定义工具栏

4.3. QRadioButton:选择按钮

案例: 仿手机开关效果

资源文件

main

4.4. QCheckBox:检查框

案例：三态选择框

样式

main

4.5. QCommandLinkButton:命令链接按钮

案例：链接窗口

4.6. QDialogButtonBox:对话框按钮

案例：