【C++ Qt】必备 按钮类控件（源码实操 + 思维导图）

每日激励：“不设限和自我肯定的心态：I can do all things。 — Stephen Curry”

绪论​：
从本章开始将会不断的开始了解Qt中的许多控件，通过这些控件才能对GUI界面的设计如虎添翼，先从按钮类开始，主要了解三种最常见的按钮：正常按钮、单选按钮、复选按钮（具体见下思维导图）。过程中通过先了解按钮，然后通过实例进行实操演练，俗话说实践检验真理~
————————
早关注不迷路，话不多说安全带系好，发车啦（建议电脑观看）。

QWidget中涉及到的各种属性/函数/使用方法，针对接下来介绍的Qt的各种控件也是有效的

按钮类控件

1. PushButton

QPushButton 继承⾃ QAbstractButton 这个类是⼀个抽象类（这个类包含了纯虚函数，无法创建出对象，若要创建对象就需要创建子类，并重写纯虚函数）是其他按钮的⽗类

QAbstractButton 中和 QPushButton 相关性较⼤的属性

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

实操1：给按钮填加图标

1. 给按钮加一个图标（图片），加图片放到 qrc 文件

创建图标对象 （QIcon icon对象）并构造传人qrc文件图片路径
附：如果要切换会qrc编辑器，此时左边的qrc文件可能是无效的，而是点击选择上面的：

2. 给ui拖拽生成的按钮设置图标（setIcon传递icon对象）
3. 可以设置图标的尺寸（setIconSIze(Qsize(长，宽))）

源码：

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* pushbutton = new QPushButton(this);
    QIcon icon(":/1.jpg");

    pushbutton->setIcon(icon);
    pushbutton->setIconSize(QSize(500,500));
}

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

实操2：给按钮添加快捷键

前面写过一个例子，通过四个按钮控制 target按钮 移动，之前是通过鼠标进行点击移动，那现在可以引入快捷键，直接通过按钮快捷键操作

1. 给按钮设置图片 qrc 文件 导入资源
   1. 将图片添加到项目中，不过此时图片还比较多可以放到一个目录中img
2. 通过 ui 文件，创建界面：
   1. 拖拽四个按钮和一个目标按钮
3. 编写构造函数，完成初始化操作（同上操作）
   1. 设置按钮的图标
   2. 添加图片，设置图片大小

在Qt 中可以添加 vim 插件，这样就能使用 vim 中的一些指令 （工具选项中的FackVime）

4. 设置 方向键的 槽函数：
   1. 获取target的位置
   2. 通过geometry属性进行设置、QRect对象
   3. 根据方向键的具体操作设置新的位置 (±5px)
5. 快捷键的设值
   1. 在Widget的构造函数中设置（因为要程序已启动就生效）
   2. 通过setShortcut
   3. 其中的有个对象 QKeySequence ，其中能构造成四个方向： w s a d （上下左右）注意不能写错，符合按键 ctrl + w ）
   4. 但也有另外的初始化方法：宏方法 Qt::Key_W、Qt::Key_S、Qt::Key_A、Qt::Key_D（其中Key宏本质就是键盘，因为枚举宏枚举了所有键盘中的值，所以就能指代）
   5. 其中还能进行符合按键的快捷（ctrl（Qt::CTRL）+ w），直接通过 + 连接即可
   6. 连发功能：键盘快捷键是默认连发的、而鼠标不行所以需要自行开启设置自动连发（setAutoRepeat）

源码：

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
//    QPushButton* pushbutton = new QPushButton(this);

    QIcon icon(":/1.jpg");

    ui->pushButton_target->setIcon(icon);
    ui->pushButton_target->setIconSize(QSize(50,50));

    //设置快捷键：wsad 常见的英文键盘的移动
//    ui->pushButton_up->setShortcut(QKeySequence("w"));
//    ui->pushButton_right->setShortcut(QKeySequence("d"));
//    ui->pushButton_left->setShortcut(QKeySequence("a"));
//    ui->pushButton_down->setShortcut(QKeySequence("s"));

    //设置快捷键：wsad 常见的英文键盘的移动
    ui->pushButton_up->setShortcut(QKeySequence(Qt::Key_W));
    ui->pushButton_right->setShortcut(QKeySequence(Qt::Key_D));
    ui->pushButton_left->setShortcut(QKeySequence(Qt::Key_A));
    ui->pushButton_down->setShortcut(QKeySequence(Qt::Key_S));

    //给鼠标添加连击功能：
    ui->pushButton_up->setAutoRepeat(true);
    ui->pushButton_right->setAutoRepeat(true);
    ui->pushButton_left->setAutoRepeat(true);
    ui->pushButton_down->setAutoRepeat(true);
}

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

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());
}

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_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_down_clicked()
{
    QRect rect = ui->pushButton_target->geometry();
    ui->pushButton_target->setGeometry(rect.x(),rect.y() + 5,rect.width(),rect.height());
}

2. Radio Buttion 单选按钮

QRadioButton 是单选按钮. 可以让我们在多个选项中选择⼀个
作为 QAbstractButton 和 QWidget 的⼦类, 上⾯介绍的属性和⽤法, 对于 QRadioButton 同样适⽤

属性	说明
checkable	是否能选中
checked	是否已经被选中. checkable 是 checked 的前提条件.
autoExclusive	是否排他。选中⼀个按钮之后是否会取消其他按钮的选中（或者说只能选择一种情况）。默认就是排他的

实操1

1. ui 拖拽三个 RadioButtion，分别命名为：男、女、其他

2. Label：“您选择的性别为：”

3. 给三个RadioButtion添加 clicked 槽函数

   1. 当点击第一个后，修改label内部内容：您选择的性别为：男、。。。
   2. 默认是排他的
      

4. 填设置默认选项

   1. 在构造函数中设置
   2. 对第一个男选项实现默认选中 （setChecked） 并设置文本
      

5. 其中设置 其他按钮 无法被选中：

   1. 对该控件调用 setEnabled / setDisabled 控制控件的使用
   2. （ 不使用 setCheckable 是因为 它只能设置不能被选中，但仍然会执行槽函数触发点击事件）
      
      构造函数中的内容：

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

    ui->radioButton_3->setEnabled(false);

槽函数：

void Widget::on_radioButton_clicked()
{
    //将label文本设置为 您选择...:男
    ui->label->setText("您选择的性别是：男");
}

void Widget::on_radioButton_2_clicked()
{
    ui->label->setText("您选择的性别是：女");
}

void Widget::on_radioButton_3_clicked()
{
    ui->label->setText("您选择的性别是：其他");
}

了解其他信号：

通过四个RadioBUttion单选框测试四个信号：

1. clicked（bool）：此处的 bool 表示当前控件是否被选中的状态，也就能在槽函数内部进行获取这个参数
2. pressed：按下就会立马触发
3. released：按下不会响应，当点击抬起来就会生效
4. toggled（切换）：切换的时候触发，当状态发生改变的时候触发这个信号

2.1 实例：认识QButtonGroup

简单模拟实现点餐的功能

1. 打开ui，拖拽三个label：请选择汉堡、小食、饮料
2. 给汉堡添加单选按钮：巨无霸、麦辣鸡腿堡、双层牛堡、
3. 给小食、饮料
   

生成后发现相互会影响，我们这里应该是分组的来单选，就得使用QButtonGroup对单选按钮进行分组

1. 创建3个QButtonGroup对象 group1、2、3
2. 通过group对象通过调用 addButton 设置该组中的 RadioButton 按钮
3. 这样就能进行区分了

分组代码（构造函数中实现）：

    QButtonGroup* group1 = new QButtonGroup(this);//必须创建在堆上
    group1->addButton(ui->radioButton_4);
    group1->addButton(ui->radioButton_5);
    group1->addButton(ui->radioButton_6);
    QButtonGroup* group2 = new QButtonGroup(this);
    group2->addButton(ui->radioButton_7);
    group2->addButton(ui->radioButton_8);
    group2->addButton(ui->radioButton_9);

    QButtonGroup *group3 = new QButtonGroup(this);
    group3->addButton(ui->radioButton_10);
    group3->addButton(ui->radioButton_11);
    group3->addButton(ui->radioButton_12);

3. CheckBox

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

实操1

label：今天你的安排是：
CheckBox：学习、打游戏、打球
pushButton：确认

给pushButton设置槽函数

1. QString result：今天你的安排是：
2. 判断其他几个复选框的选中信号情况（isChecked）
3. 若为真则对 result进行拼接该复选框中的内容 text（可以多拼接个空格）
4. 最终全部设置到label的文本Text中

按钮的槽函数：

void Widget::on_pushButton_submit_clicked()
{
    QString str("今日的任务是：");

    //isChecked判断是否被选中
    if(ui->checkBox->isChecked() ){
        //被选中了
        str += QString("学习");
    }
    if(ui->checkBox_2->isChecked()){
        str += QString("打球");
    }
    if(ui->checkBox_3->isChecked()){

        str += QString("打游戏");
    }
    ui->label_5->setText(str);
}

---

本章完。预知后事如何，暂听下回分解。

如果有任何问题欢迎讨论哈！

如果觉得这篇文章对你有所帮助的话点点赞吧！

持续更新大量C++ Qt细致内容，早关注不迷路。

​