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

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("你选择的性别为：其它");
}