C++Qt学习——QPushButton、QRadioButton(单选按钮)、QCheckBox(复选按钮)

news2025/1/10 17:22:42

1、QPushButton

1.1、创建一个新的项目，转到UI界面拖一个Push Button

1.2、Push Button的常用信号主要有四个，分别为 clicked(), pressed(), released(), toggled()

1.2.1、按住Push Button右键转到槽，选择信号函数

1.2.2、在Widget.h里面会自动生成声明

1.2.3、在Widget.cpp里面自动出现函数的定义，在里面自己写上函数的定义

1.3、设计一个音乐播放器

1.3.1、创建qss文件

2、QRadioButton(单选按钮)

2.1、创建一个新的项目，转到UI界面拖一个Radio Button

2.2、按住Radio Button，右键转到槽。

2.3、选择toggled（bool）信号

2.3.1、在Widget.h里面会自动生成声明

2.3.2、在Widget.cpp里面自动出现函数的定义，在里面自己写上函数的定义

2.4、修饰Radio Button

2.4.1、当没有选中RadioButton的时候，是这个图标

2.4.2、选中的时候是

2.4.3、修改RadioButton的字体大小和颜色

2.4.4、修改RadioButton的图标大小和颜色

2.4.5、修改PushButton

2.5、多选RadioButton

3、QCheckBox(复选按钮)

3.1、创建一个新的项目，转到UI界面拖一个Check Box

3.2、勾选三个状态tristate

3.3、按住CheckBox，右键转到槽。，这次看一个新的信号

3.3.1、在Widget.h里面会自动生成声明

3.3.2、在Widget.cpp里面自动出现函数的定义，在里面自己写上函数的定义

3.4、修饰CheckBox

3.4.1、当没有选中RadioButton的时候，是这个图标

3.4.2、当半选的时候

3.4.3、当选中的时候

3.4.4、设置CheckBox的大小

4、代码分享

1、QPushButton

1.1、创建一个新的项目，转到UI界面拖一个Push Button

1.2、Push Button的常用信号主要有四个，分别为 clicked(), pressed(), released(), toggled()

1.2.1、按住Push Button右键转到槽，选择信号函数

1.2.2、在Widget.h里面会自动生成声明

1.2.3、在Widget.cpp里面自动出现函数的定义，在里面自己写上函数的定义

注意想打印语句的话必须引入头文件，而且如果使用toggled的话，必须将Push Button改成可选的

#include <QDebug>

ui->pushButton->setCheckable(true);

1.3、设计一个音乐播放器

我们只是这只红色标注的这块儿。一共有以下几个注意事项

A、当没开启音乐的时候是暂停的图片

B、当鼠标移动到开启音乐那块的时候，暂停的图标会亮（其实也就是两张图片，一个比两外一个亮度高一点儿）

C、当按下开启听歌的时候，状态变为放音乐的状态。同理当鼠标移动到开启音乐那块的时候，图标会亮（其实也就是两张图片，一个比两外一个亮度高一点儿）

1.3.1、创建qss文件

具体看https://blog.csdn.net/wjl990316fddwjl/article/details/136544557

A、先设置中间的按钮，整个项目一共准备八张图片

QPushButton#pushButton_2{border-image: url(:/icons/btn_play_1.png)}
QPushButton#pushButton_2:hover{border-image: url(:/icons/btn_play_2.png)}
QPushButton#pushButton_2:checked{border-image: url(:/icons/btn_pause_1.png)}
QPushButton#pushButton_2:checked:hover{border-image: url(:/icons/btn_pause_2.png)}

解释：hover的意思就是当鼠标停留在按钮上的时候会转换成另一张图

当按下的时候，切换图片

B、左右两个按键

QPushButton#pushButton{border-image: url(:/icons/btn_pause_3.png)}
QPushButton#pushButton:hover{border-image: url(:/icons/btn_pause_3_2.png)}

QPushButton#pushButton_3{border-image: url(:/icons/btn_pause_4.png)}
QPushButton#pushButton_3:hover{border-image: url(:/icons/btn_pause_4_2.png)}