Qt 按钮类控件（Push Button 与 Radio Button）（1）

文章目录

Push Button
- 前提概要
- API接口
- 给按钮添加图标
- 给按钮添加快捷键
Radio Button
- API接口
- 性别选择

Push Button（鼠标点击不放连续移动+快捷键）

请添加图片描述

Radio Button

请添加图片描述

Push Button

前提概要

1. 之前文章中所提到的各种跟QWidget有关的各种属性/函数/方法，针对接下来要介绍的Qt的各种控件都是有效的

2. 使用QPushButton表示一个按钮，它继承自QAbstractButton，这个类是一个抽象类，是其它按钮的父类。下面是继承关系图

在这里插入图片描述
3. 抽象类，这个类包含了纯虚函数，无非创建出实例对象。创建子类必须要重写上述的纯虚函数，才能创建出子类的实例（否则子类仍然也是一个纯虚函数）

API接口

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

给按钮添加图标

1.先要考虑如何导入图片，在后续编写代码，如果用到一些图片等外部资源，都会优先考虑qrc机制，除非这个资源太大了。qrc机制可以参考这篇文章：Qt window frame + windowTitle + windowIcon属性（3）

在这里插入图片描述

2.如果你在Qt Creator中创建好qrc文件后，切换到代码编辑框编写代码，如果再想切回到刚才的qrc编辑器，此时点击左侧的qrc文件很可能是无效的，这算是Qt Creator的一个bug
在这里插入图片描述

3.编写代码 + 图形化拖拽Push Button

在这里插入图片描述

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

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

    // 创建一个图标对象
    QIcon icon(":/push_Button_icon.jpg");
    // 设置图标
    ui->pushButton->setIcon(icon);
    // 调整图标的显示大小
    ui->pushButton->setIconSize(QSize(50, 50));
}

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

4.效果展示

在这里插入图片描述

给按钮添加快捷键

1.之前写过一个例子，通过四个按钮来控制target按钮的移动，之前这个移动是通过鼠标点击按钮来实现的。那此时就可以引入快捷键，通过快捷键来模拟鼠标的点击，这里按钮就直接通过图片来表示了。下面还要有个target按钮的图标
在这里插入图片描述
2.创建qrc文件，导入资源。把图片导入项目的时候，由于图片变多了，不想再继续放到项目根目录下，就创建了image目录，把图片放到image目录中，此时意味着后续访问这些图片，就需要再路径中带上image这一级目录名字

在这里插入图片描述

3.编辑ui文件，创建图形化界面。这里可以通过点阵把这些按钮对齐，不过后面还会介绍更好的方式来完成这里的对齐操作。在右上角处（Qt 程序运行过程中，对象树的模样）可以更直观的看到对象结构，以及每个对象的objectName

在这里插入图片描述

4.编写构造函数，完成初始化操作

在这里插入图片描述

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

    // 创建图标去初始化每个按钮
    ui->pushButton_target->setIcon(QIcon(":/image/target.jpg"));
    ui->pushButton_target->setIconSize(QSize(120, 120));

    // 初始化向上按钮
    ui->pushButton_up->setIcon(QIcon(":/image/up.png"));
    ui->pushButton_up->setIconSize(QSize(50, 50));

    // 初始化向左按钮
    ui->pushButton_left->setIcon(QIcon(":/image/left.png"));
    ui->pushButton_left->setIconSize(QSize(50, 50));

    // 初始化向右按钮
    ui->pushButton_right->setIcon(QIcon(":/image/right.png"));
    ui->pushButton_right->setIconSize(QSize(50, 50));

    // 初始化向下按钮
    ui->pushButton_down->setIcon(QIcon(":/image/down.png"));
    ui->pushButton_down->setIconSize(QSize(50, 50));
}

5.实现方向键的槽函数（转到槽定义），复制粘贴也特别细心一点，这里复制粘贴完了之后要进行代码的微调（坐标计算），通过鼠标点击去移动target按钮

在这里插入图片描述

void Widget::on_pushButton_up_clicked()
{
    // 获取到目前target的位置
    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()
{
    // 获取到目前target的位置
    QRect rect = ui->pushButton_target->geometry();
    // 基于目前的位置，去设置新的位置
    ui->pushButton_target->setGeometry(rect.x(), rect.y() + 5, rect.width(), rect.height());
}
void Widget::on_pushButton_right_clicked()
{
    // 获取到目前target的位置
    QRect rect = ui->pushButton_target->geometry();
    // 基于目前的位置，去设置新的位置
    ui->pushButton_target->setGeometry(rect.x() + 5, rect.y(), rect.width(), rect.height());
}
void Widget::on_pushButton_left_clicked()
{
    // 获取到目前target的位置
    QRect rect = ui->pushButton_target->geometry();
    // 基于目前的位置，去设置新的位置
    ui->pushButton_target->setGeometry(rect.x() - 5, rect.y(), rect.width(), rect.height());
}

6.设置快捷键（关键要点），也是需要在Widget的构造函数中完成，程序一启动，快捷键就是有效的

在这里插入图片描述

这里是直接通过按键的名字去设置，虽然简单但挺容易写错的（写错了并不会报错）。其次按下的快捷键不一定是单个按键，有可能是组合键（QKeySequence("ctrl+w")参数中不要带空格）

// ui->pushButton_up->setShortcut(QKeySequence("ctrl+w"));
ui->pushButton_up->setShortcut(QKeySequence("w"));
ui->pushButton_down->setShortcut(QKeySequence("s"));
ui->pushButton_left->setShortcut(QKeySequence("a"));
ui->pushButton_right->setShortcut(QKeySequence("d"));

还可以通过按键的枚举来设置按键的快捷键，组合快捷键的写法：QKeySequence(Qt::CTRL + Qt::Key_W)。按ctrl加鼠标点击Key_W可进入查看

// ui->pushButton_up->setShortcut(QKeySequence(Qt::CTRL + Qt::Key_W));
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));

7.这里键盘快捷键默认就是能连发的，但是鼠标点击按钮则不行（打枪游戏中的点射和连续射击），这里要用到setAutoRepeat(true)接口，在Widget的构造函数中

 // 鼠标连续点击
 ui->pushButton_up->setAutoRepeat(true);
 ui->pushButton_down->setAutoRepeat(true);
 ui->pushButton_left->setAutoRepeat(true);
 ui->pushButton_right->setAutoRepeat(true);

8.动图演示

请添加图片描述

Radio Button

QRadioButton是单选按钮，可以让我们在多个选项中选择一个。同样适用上面介绍的属性和用法

API接口

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

性别选择

1.在界面上提供三个可选择项：男，女，其它

在这里插入图片描述

2.先要提供一个默认选项

在这里插入图片描述

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    
    // 先添加一个默认选项
    ui->radioButton_male->setChecked(true);
    ui->label->setText("你选择的性别为：男");
}

3.三个按钮转到槽定义槽函数

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

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

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

4.选了性别男或女后，那就不能去勾选其它选项了，ui->radioButton_other->setCheckable(false);但checkable它只是能让按钮不被选中，仍然是可以响应点击事件的

在这里插入图片描述

5.直接禁用掉其它选项，这里也能看出来，对于QRadioButton按钮默认就是排他的，只能选中其中一个

在这里插入图片描述

6.widget.cpp

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

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

    // 先添加一个默认选项
    ui->radioButton_male->setChecked(true);
    ui->label->setText("你选择的性别为：男");
}

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


void Widget::on_radioButton_male_clicked()
{
    // 将界面上的内容进行更新
    ui->label->setText("你选择的性别为：男");
    // ui->radioButton_other->setCheckable(false);
    // 那这里基本上就之只能将其给禁用掉
    // ui->radioButton_other->setEnabled(false);
    ui->radioButton_other->setDisabled(true);
}

void Widget::on_radioButton_female_clicked()
{
    // 将界面上的内容进行更新
    ui->label->setText("你选择的性别为：女");
    // ui->radioButton_other->setCheckable(false);
    ui->radioButton_other->setEnabled(false);
}

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