【Qt常用控件】按钮类控件

文章目录

[1. Push Button](#1. Push Button)
[2. Radio Button](#2. Radio Button)
[3. Check Box](#3. Check Box)
[4. Tool Button](#4. Tool Button)

1. Push Button

使用 QPushButton 表示一个按钮. 这也是当前我们最熟悉的一个控件了.

QPushButton 继承自 QAbstractButton . 这个类是一个抽象类. 是其他按钮的父类.

QAbstractButton 中, 和 QPushButton 相关性较大的属性

text：按钮中的文本
icon：按钮中的图标
iconSize：按钮中图标的尺寸
shortCut：按钮对应的快捷键
autoRepeat ：按钮是否会重复触发. 当鼠标左键按住不放时,
- 如果设为 true, 则会持续产生鼠标点击事件;
- 如果设为 false, 则必须释放鼠标, 再次按下鼠标时才能产生点击事件. (相当于游戏手柄上的 "连发" 效果)
autoRepeatDelay：重复触发的延时时间. 按住按钮多久之后, 开始重复触发.
autoRepeatInterval：重复触发的周期.

注意：

QAbstractButton 作为 QWidget 的子类, 当然也继承了 QWidget 的属性. 上篇文章介绍的 QWidget 里的各种属性用法, 对于 QAbstractButton 同样适用. 因此上面仅列出 QAbstractButton 独有的属性.
Qt 的 api 设计风格是非常清晰的. 此处列出的属性都是可以获取和设置的. 例如, 使用 text() 获取按钮文本; 使用 setText() 设置文本.

事实上, QPushButton 的核心功能都是 QAbstractButton 提供的. 自身提供的属性都比较简单.

其中 default 和 audoDefault 影响的是按下 enter 时自动点击哪个按钮的行为; flat 把按钮设置为扁平的样式. 这里我们暂时都不做过多关注.

代码示例：带有图标的按钮

创建 resource.qrc 文件, 并导入图片

具体操作步骤参见上篇文章 QWidget 中的 windowIcon 部分. 此处不再赘述

在界面上创建一个按钮

修改 widget.cpp, 给按钮设置图标.

cpp 复制代码

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

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建图标对象
    QIcon icon(":/huaji.jpg");
    // 设置图标
    ui->pushButton->setIcon(icon);
    // 设置图标大小
    ui->pushButton->setIconSize(QSize(50, 50));
}

运行结果：

代码示例：带有快捷键的按钮

在界面中拖五个按钮。五个按钮的 objectName 分别为 pushButton_target , pushButton_up , pushButton_down , pushButton_left , pushButton_right

五个按钮的初始位置随意, 其中 pushButton_target 尺寸设置为 100 * 100, 其余按钮设为 50 * 50. 文本内容均清空

创建 resource.qrc , 并导入 5 个图片.

像上述这样的图片资源, 可以在 "阿里巴巴矢量图标库" 中查找并免费下载.

修改 widget.cpp, 设置图标资源和快捷键

使用 setShortcut 给按钮设置快捷键. 参数是一个 QKeySequence 对象. 表示一个按键序列. 支持组合键 (ctrl + c 这种).
QKeySequence 的构造函数参数, 可以直接使用 "ctrl+c" 这样的按键名字符串表示, 也可以使用预定义好的常量 (形如 Qt::CTRL + Qt::Key_C ) 表示

cpp 复制代码

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

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

    // 设置图标
    ui->pushButton_target->setIcon(QIcon(":/image/huaji.jpg"));
    ui->pushButton_target->setIconSize(QSize(100, 100));
    ui->pushButton_up->setIcon(QIcon(":/image/Up-6.png"));
    ui->pushButton_up->setIconSize(QSize(50, 50));
    ui->pushButton_down->setIcon(QIcon(":/image/Down-6.png"));
    ui->pushButton_down->setIconSize(QSize(50, 50));
    ui->pushButton_left->setIcon(QIcon(":/image/Left-6.png"));
    ui->pushButton_left->setIconSize(QSize(50, 50));
    ui->pushButton_right->setIcon(QIcon(":/image/Right-6.png"));
    ui->pushButton_right->setIconSize(QSize(50, 50));
    
    // 设置快捷键
    ui->pushButton_up->setShortcut(QKeySequence("w"));
    ui->pushButton_down->setShortcut(QKeySequence("s"));
    ui->pushButton_left->setShortcut(QKeySequence("a"));
    ui->pushButton_right->setShortcut(QKeySequence("d"));
     
    // 设置快捷键也可以写作
    // ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W));
    // ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));
    // ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));
    // ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));
}

修改 widget.cpp, 设置四个方向键的 slot 函数

cpp 复制代码

void Widget::on_pushButton_up_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(), rect.y()-5, rect.width(), rect.height());
}

void Widget::on_pushButton_down_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(), rect.y()+5, rect.width(), rect.height());
}

void Widget::on_pushButton_left_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x()-5, rect.y(), rect.width(), rect.height());
}

void Widget::on_pushButton_right_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x()+5, rect.y(), rect.width(), rect.height());
}

运行结果：

在上述案例中, 按住快捷键, 是可以进行重复触发的. 但是鼠标点击则不能.

修改 widget.cpp, 在构造函数中开启重复触发.

cpp 复制代码

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

    // 设置图标
    ui->pushButton_target->setIcon(QIcon(":/image/huaji.jpg"));
    ui->pushButton_target->setIconSize(QSize(100, 100));
    ui->pushButton_up->setIcon(QIcon(":/image/Up-6.png"));
    ui->pushButton_up->setIconSize(QSize(50, 50));
    ui->pushButton_down->setIcon(QIcon(":/image/Down-6.png"));
    ui->pushButton_down->setIconSize(QSize(50, 50));
    ui->pushButton_left->setIcon(QIcon(":/image/Left-6.png"));
    ui->pushButton_left->setIconSize(QSize(50, 50));
    ui->pushButton_right->setIcon(QIcon(":/image/Right-6.png"));
    ui->pushButton_right->setIconSize(QSize(50, 50));

    // 设置快捷键
    ui->pushButton_up->setShortcut(QKeySequence("w"));
    ui->pushButton_down->setShortcut(QKeySequence("s"));
    ui->pushButton_left->setShortcut(QKeySequence("a"));
    ui->pushButton_right->setShortcut(QKeySequence("d"));

    // 设置快捷键也可以写作
    // ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W));
    // ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));
    // ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));
    // ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));
    
    ui->pushButton_up->setAutoRepeat(true);
    ui->pushButton_down->setAutoRepeat(true);
    ui->pushButton_left->setAutoRepeat(true);
    ui->pushButton_right->setAutoRepeat(true);
}

运行结果：

此时, 按住鼠标时, 即可让图标连续移动.

2. Radio Button

QRadioButton 是单选按钮. 可以让我们在多个选项中选择一个.

作为 QAbstractButton 和 QWidget 的子类, 上篇文章介绍的属性和用法, 对于 QRadioButton 也同样适用.

QAbstractButton 中和 QRadioButton 关系较大的属性

checkable：是否能选中
checked：是否已经被选中. checkable 是 checked 的前提条件.
autoExclusive ：是否排他.
- 选中一个按钮之后是否会取消其他按钮的选中.
- 对于 QRadioButton 来说默认就是排他的

代码示例：选择性别

在界面上创建一个 label, 和 3 个单选按钮

设置的文本如下图. 3 个单选按钮的 objectName 分别为 radioButton_male , radioButton_female , radioButton_other

修改 widget.cpp, 编辑三个 QRadioButton 的 slot 函数.

cpp 复制代码

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

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

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


void Widget::on_radioButton_male_clicked()
{
    // 把界面上的 label 的内容进行更新
    ui->label->setText("您选择的性别是：男");
}

void Widget::on_radioButton_female_clicked()
{
    // 把界面上的 label 的内容进行更新
    ui->label->setText("您选择的性别是：女");
}

void Widget::on_radioButton_other_clicked()
{
    // 把界面上的 label 的内容进行更新
    ui->label->setText("您选择的性别是：其他");
}

运行结果：可以看到随着选择不同的单选按钮, label 中的提示文字就会随之变化.

当前代码中, 如果程序启动, 则不会选择任何选项. 可以修改代码, 让程序启动默认选中性别男

cpp 复制代码

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 设置默认选中该按钮
    ui->radioButton_male->setChecked(true);
    ui->label->setText("您选择的性别是：男");
}

运行结果：即可看到性别男已经被选中了.

当前代码中, 也可以禁用 "其他" 被选中.

修改 widget.cpp 的构造函数

cpp 复制代码

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

    // 设置默认选中该按钮
    ui->radioButton_male->setChecked(true);
    ui->label->setText("您选择的性别是：男");
    
    // 禁用 other 选项
    ui->radioButton_other->setCheckable(false);
}

运行结果：

可以看到, 点击 "其他" 按钮的时候, 虽然不会被选中, 但是可以触发点击事件, 使上面的 label 显示性别为其他.

使用 setEnabled(false)/setDisabled(true) 是更彻底的禁用按钮的方式. 此时该按钮无法被选中, 也无法响应任何输入

cpp 复制代码

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

    // 设置默认选中该按钮
    ui->radioButton_male->setChecked(true);
    ui->label->setText("您选择的性别是：男");

    // 禁用 other 选项
    // ui->radioButton_other->setCheckable(false);
    ui->radioButton_other->setEnabled(false);
}

运行结果：

**代码示例：**click, press, release, toggled 的区别

clicked 表示一次 "点击"
pressed 表示鼠标 "按下"
released 表示鼠标 "释放"
toggled 表示按钮状态切换.

在界面上创建四个单选按钮，objectName 分别为 radioButton , radioButton_2 , radioButton_3 , radioButton_4

给 1 创建 clicked 槽函数, 给 2 创建 pressed 槽函数, 给 3 创建 released 槽函数, 给 4 创建 toggled 槽函数.

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>

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

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


void Widget::on_radioButton_clicked(bool checked)
{
    qDebug() << "clicked: " << checked;
}


void Widget::on_radioButton_2_pressed()
{
    qDebug() << "pressed";
}

void Widget::on_radioButton_3_released()
{
    qDebug() << "released";
}


void Widget::on_radioButton_4_toggled(bool checked)
{
    // checked 状态发生改变, 就会触发这个信号.
    qDebug() << "toggled: " << checked;
}

运行结果：

从运行结果, 可以看到

clicked 是一次鼠标按下+鼠标释放触发的.
pressed 是鼠标按下触发的.
released 是鼠标释放触发的.
toggled 是 checked 属性改变时触发的.

总的来说, toggled 是最适合 QRadioButton 的

代码示例：单选框分组

在界面上创建 6 个单选框, 用来模拟麦当劳点餐界面，objectName 分别为 radioButton 到 radioButton_6

此时直接运行程序, 可以看到, 这六个 QRadioButton 之间都是排他的.

我们希望每一组内部来控制排他, 但是组和组之间不能排他.

此时可以引入 QButtonGroup 类，这个类可以针对单选按钮进行分组～~

修改 widget.cpp

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include <QButtonGroup>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 创建三个 QButtonGroup
    QButtonGroup* group1 = new QButtonGroup(this);
    QButtonGroup* group2 = new QButtonGroup(this);
    QButtonGroup* group3 = new QButtonGroup(this);
    
    // 把 QRadioButton 两两一组, 放到三个 QButtonGroup 中.
    group1->addButton(ui->radioButton);
    group1->addButton(ui->radioButton_2);
    
    group2->addButton(ui->radioButton_3);
    group2->addButton(ui->radioButton_4);
    
    group3->addButton(ui->radioButton_5);
    group3->addButton(ui->radioButton_6);
}

运行结果：

3. Check Box

QCheckBox 表示复选按钮. 可以允许选中多个，和 QCheckBox 最相关的属性也是 checkable 和 checked , 都是继承自QAbstractButton .

至于 QCheckBox 独有的属性 tristate 用来实现 "三态复选框" . 这个东西比较冷门, 咱们这里不做讨论.

代码示例：获取复选按钮的取值

在界面上创建三个复选按钮, 和一个普通按钮，objectName 分别为 checkBox_study , checkBox_game , checkBox_sleep , 以及 pushButton

给 pushButton 添加 slot 函数

cpp 复制代码

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

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

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


void Widget::on_pushButton_clicked()
{
    QString result = "今天你的安排是：";
    if(ui->checkBox_study->isChecked())
    {
        result += ui->checkBox_study->text() + " ";
    }
    if(ui->checkBox_game->isChecked())
    {
        result += ui->checkBox_game->text() + " ";
    }
    if(ui->checkBox_sleep->isChecked())
    {
        result += ui->checkBox_sleep->text() + " ";
    }
    ui->label->setText(result);
}

运行结果：

4. Tool Button

QToolButton 的大部分功能, 和 QPushButton 是一致的. 但是 QToolButton 主要应用在工具栏, 菜单等场景. 这个我们暂时先不介绍.