Qt 按钮类控件详解-平芜编程栈

📑 目录

🎨 1.按钮类控件
- 🔘 1.1 Push Button
- 🔘 1.2 Radio Button
- 1.3 Check Box
- 🛠️ 1.4 Tool Button
📝 小结
经典面试题

🎨 1.按钮类控件

🔘 1.1 Push Button

QPushButton继承⾃QAbstractButton .。这个类是⼀个抽象类. 是其他按钮的⽗类，QAbstractButton中, 和QPushButton相关性较⼤的属性。

📚 1.QAbstractButton作为QWidget的⼦类, 当然也继承了QWidget的属性. 上⾯介绍的QWidget⾥的各种属性⽤法, 对于QAbstractButton同样适⽤. 因此表格仅列出QAbstractButton独有的属性.
2. Qt 的 api 设计⻛格是⾮常清晰的. 此处列出的属性都是可以获取和设置的. 例如, 使⽤text()获取按钮⽂本; 使⽤setText()设置⽂本.

事实上,QPushButton的核⼼功能都是QAbstractButton提供的. ⾃⾝提供的属性都⽐较简单.
其中default和audoDefault影响的是按下enter时⾃动点击哪个按钮的⾏为;flat把按钮设置为扁平的样式. 这⾥我们暂时都不做过多关注.

代码⽰例: 带有图标的按钮

创建resource.qrc⽂件, 并导⼊图⽚

📌**注意：**在Qt Creator中，创建好qrc文件后，切换到代码编辑框，编写代码，如果在想切换回到刚才的qrc编辑器，此时点击左侧的qrc文件很可能会失效此时可以点击代码上方的下拉框来进行切换。

在界⾯上创建⼀个按钮
修改 widget.cpp, 给按钮设置图标

#include"widget.h"#include"ui_widget.h"#include<QIcon>#include<QPushButton>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);//创建图标QIconicon(":/md.svg");//设置图标ui->btn->setIcon(icon);//设置图标大小ui->btn->setIconSize(QSize(50,50));}Widget::~Widget(){deleteui;}

🌲 把图片导入项目的时候，由于图片多了，不想在继续放在项目根目录下了，就可以创建image目录，再把图片放到image目录中，此时就意味着后续访问这些图片，就需要在路径当中带上image这一目录名字。

执⾏程序, 观察效果

代码⽰例: 带有快捷键的按钮
在界⾯中拖五个按钮.
五个按钮的objectName分别为target,up,down,left,right
五个按钮的初始位置随意, 其中target尺⼨设置为100 * 100, 其余按钮设为50 * 50. ⽂本内容均清空
创建resource.qrc, 并导⼊ 5 个图⽚.
修改 widget.cpp, 设置图标资源和快捷键

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

#include"widget.h"#include"ui_widget.h"#include<QIcon>#include<QPushButton>#include<QIcon>#include<QShortcut>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);//设置图标ui->target->setIcon(QIcon(":/md.svg"));ui->up->setIcon(QIcon(":/up.svg"));ui->down->setIcon(QIcon(":/down.svg"));ui->left->setIcon(QIcon(":/left.svg"));ui->right->setIcon(QIcon(":/right.svg"));//设置快捷键ui->up->setShortcut(QKeySequence("w"));ui->down->setShortcut(QKeySequence("s"));ui->left->setShortcut(QKeySequence("a"));ui->right->setShortcut(QKeySequence("d"));// //快捷键也可以写作// ui->up->setShortCut(QKeySequence(Qt::Key_W));// ui->down->setShortCut(QKeySequence(Qt::Key_S));// ui->left->setShortCut(QKeySequence(Qt::Key_A));// ui->right->setShortCut(QKeySequence(Qt::Key_D));}Widget::~Widget(){deleteui;}

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

#include"widget.h"#include"ui_widget.h"#include<QIcon>#include<QPushButton>#include<QIcon>#include<QShortcut>#include<QDebug>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);//设置图标ui->target->setIconSize(QSize(100,100));ui->target->setIcon(QIcon(":/md.svg"));ui->up->setIcon(QIcon(":/up.svg"));ui->down->setIcon(QIcon(":/down.svg"));ui->left->setIcon(QIcon(":/left.svg"));ui->right->setIcon(QIcon(":/right.svg"));//设置快捷键ui->up->setShortcut(QKeySequence("w"));ui->down->setShortcut(QKeySequence("s"));ui->left->setShortcut(QKeySequence("a"));ui->right->setShortcut(QKeySequence("d"));// //快捷键也可以写作// ui->up->setShortCut(QKeySequence(Qt::Key_W));// ui->down->setShortCut(QKeySequence(Qt::Key_S));// ui->left->setShortCut(QKeySequence(Qt::Key_A));// ui->right->setShortCut(QKeySequence(Qt::Key_D));}Widget::~Widget(){deleteui;}voidWidget::on_up_clicked(){constQRect&rect=ui->target->geometry();ui->target->setGeometry(rect.x(),rect.y()-5,rect.width(),rect.height());qDebug()<<"up";}voidWidget::on_left_clicked(){constQRect&rect=ui->target->geometry();ui->target->setGeometry(rect.x()-5,rect.y(),rect.width(),rect.height());qDebug()<<"left";}voidWidget::on_right_clicked(){constQRect&rect=ui->target->geometry();ui->target->setGeometry(rect.x()+5,rect.y(),rect.width(),rect.height());qDebug()<<"right";}voidWidget::on_down_clicked(){constQRect&rect=ui->target->geometry();ui->target->setGeometry(rect.x(),rect.y()+5,rect.width(),rect.height());qDebug()<<"down";}

运⾏程序, 此时点击按钮, 或者使⽤wasd均可让target移动.

代码⽰例: 按钮的重复触发
在上述案例中, 按住快捷键, 是可以进⾏重复触发的. 但是⿏标点击则不能.
修改widget.cpp, 在构造函数中开启重复触发.

#include"widget.h"#include"ui_widget.h"#include<QIcon>#include<QPushButton>#include<QIcon>#include<QShortcut>#include<QDebug>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);//设置图标ui->target->setIconSize(QSize(100,100));ui->target->setIcon(QIcon(":/md.svg"));ui->up->setIcon(QIcon(":/up.svg"));ui->down->setIcon(QIcon(":/down.svg"));ui->left->setIcon(QIcon(":/left.svg"));ui->right->setIcon(QIcon(":/right.svg"));//设置快捷键ui->up->setShortcut(QKeySequence("w"));ui->down->setShortcut(QKeySequence("s"));ui->left->setShortcut(QKeySequence("a"));ui->right->setShortcut(QKeySequence("d"));// //快捷键也可以写作// ui->up->setShortCut(QKeySequence(Qt::Key_W));// ui->down->setShortCut(QKeySequence(Qt::Key_S));// ui->left->setShortCut(QKeySequence(Qt::Key_A));// ui->right->setShortCut(QKeySequence(Qt::Key_D));//开启重复触发 - 连击效果ui->up->setAutoRepeat(true);ui->down->setAutoRepeat(true);ui->left->setAutoRepeat(true);ui->right->setAutoRepeat(true);}

此时, 按住⿏标时, 即可让target连续移动。

🔘 1.2 Radio Buttiononon

🐳说明：QRadioButton 是单选按钮. 可以让我们在多个选项中选择⼀个.

作为 QAbstractButton 和 QWidget 的⼦类, 上⾯介绍的属性和⽤法, 对于QRadioButton同样适⽤.
QAbstractButton中和QRadioButton关系较⼤的属性

代码⽰例: 选择性别

在界⾯上创建⼀个label, 和 3 个单选按钮
设置的⽂本如下图. 3 个单选按钮的objectName分别为male,female,other.
修改widget.cpp, 编辑三个QRadioButton的slot函数.

#include"widget.h"#include"ui_widget.h"Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);}Widget::~Widget(){deleteui;}voidWidget::on_male_clicked(){ui->label->setText("你选择的性别是：男");}voidWidget::on_female_clicked(){ui->label->setText("你选择的性别是：女");}voidWidget::on_other_clicked(){ui->label->setText("你选择的性别是：其他");}

运⾏程序, 可以看到随着选择不同的单选按钮,label中的提⽰⽂字就会随之变化。
当前代码中, 如果程序启动, 则不会选择任何选项.
可以修改代码, 让程序启动默认选中性别男

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

此时运⾏程序, 即可看到性别男已经被选中了

当前代码中, 也可以禁⽤ “其他” 被选中.
修改widget.cpp的构造函数

// 禁⽤ other 选项ui->radioButton_other->setCheckable(false);

运⾏程序, 可以看到, 点击 “其他” 按钮的时候, 虽然不会被选中, 但是可以触发点击事件, 使上⾯label
显⽰性别为其他.

使⽤setEnabled是更彻底的禁⽤按钮的⽅式. 此时该按钮⽆法被选中, 也⽆法响应任何输⼊

// 禁⽤ other 选项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槽函数.

#include"widget.h"#include"ui_widget.h"#include<QDebug>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);}Widget::~Widget(){deleteui;}voidWidget::on_radioButton_clicked(){qDebug()<<"clicked";}voidWidget::on_radioButton_2_pressed(){qDebug()<<"pressed";}voidWidget::on_radioButton_3_released(){qDebug()<<"released";}voidWidget::on_radioButton_4_toggled(boolchecked){if(checked){qDebug()<<"toggled checked true";}else{qDebug()<<"toggled checked false";}}

运⾏程序, 可以看到

clicked是⼀次⿏标按下+⿏标释放触发的.
pressed是⿏标按下触发的.
released是⿏标释放触发的.
toggled是checked属性改变时触发的.
总的来说,toggled是最适合QRadioButton的.
代码⽰例: 单选框分组

在界⾯上创建 6 个单选框, ⽤来模拟⻨当劳点餐界⾯.
objectName分别为radioButton到radioButton_6

此时直接运⾏程序, 可以看到, 这六个QRadioButton之间都是排他的.
我们希望每⼀组内部来控制排他, 但是组和组之间不能排他.
引⼊QButtonGroup进⾏分组
修改widget.cpp

#include"widget.h"#include"ui_widget.h"#include<QButtonGroup>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);//创建三个QButtonGroupQButtonGroup*group1=newQButtonGroup(this);QButtonGroup*group2=newQButtonGroup(this);QButtonGroup*group3=newQButtonGroup(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);}Widget::~Widget(){deleteui;}

再次执⾏程序, 可以看到可以按照正确的分组⽅式来完成排他了.

🐳说明：汉堡，小食，饮料中的每个类别中都只能选一项，不能两项都

1.3 Check BoxBox

QCheckBox表⽰复选按钮.可以允许选中多个.
和QCheckBox最相关的属性也是checkable和checked, 都是继承⾃QAbstractButton.
⾄于QCheckBox独有的属性tristate⽤来实现 “三态复选框” . 这个东西⽐较冷⻔.
代码⽰例: 获取复选按钮的取值

在界⾯上创建三个复选按钮, 和⼀个普通按钮
objectName分别为checkBox_eat,checkBox_sleep,checkBox_play, 以及pushButton
给pushButton添加slot函数

#include"widget.h"#include"ui_widget.h"#include<QDebug>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);}Widget::~Widget(){deleteui;}voidWidget::on_pushButton_clicked(){QString result;if(ui->checkBox_sleep->isChecked()){result+=ui->checkBox_sleep->text();}if(ui->checkBox_eat->isChecked()){result+=ui->checkBox_eat->text();}if(ui->checkBox_game->isChecked()){result+=ui->checkBox_game->text();}qDebug()<<"选中的内容是："<<result;}

运⾏程序, 可以看到点击确认按钮时, 就会在控制台中输出选中的内容.

🛠️ 1.4 Tool Buttontonnton

QToolButton的⼤部分功能, 和QPushButton是⼀致的. 但是QToolButton主要应⽤在⼯具栏, 菜单等场景

📝 小结

本文详细介绍了 Qt 中常用的按钮类控件，包括QPushButton、QRadioButton、QCheckBox和QToolButton。这些控件都继承自QAbstractButton，因此共享许多核心属性和方法，如text、checkable、checked、setIcon、setShortcut等。