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

目录

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

2、QRadioButton(单选按钮)

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

在UI界面都选成checkable的。

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

2.3、选择toggled(bool)信号

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

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

注意想打印语句的话必须引入头文件。

#include <QDebug>

2.4、修饰Radio Button

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

QRadioButton::indicator:unchecked {border-image: url(:/icons/radioButton_unchecked.png)}

2.4.2、选中的时候是

QRadioButton::indicator:checked {border-image: url(:/icons/radioButton_checked.png)}

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

QRadioButton {font-size: 30px; color: #99404040}

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

QRadioButton::indicator {width: 30px;height: 30px; }

QRadioButton {background-color: #aaDDDDDD}

2.4.5、修改PushButton

A、当没有按下按键时候的颜色以及字体大小和设置圆角

QPushButton {background-color: #404040;font-size: 30px; border-radius: 10px}

B、按下案件的时候背景发生变化,字体颜色也发生变化

QPushButton::checked {background-color: green;color: white}

 2.5、多选RadioButton

A、如果想多选几个的话,选中要选择的,右键指定到按钮组,新建按钮组

B、取消选择Exclusive

C、就可以实现选择多个啦

3、QCheckBox(复选按钮)

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

3.2、勾选三个状态tristate

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

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

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

注意想打印语句的话必须引入头文件。

#include <QDebug>

3.4、修饰CheckBox

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

QCheckBox::indicator::unchecked {border-image: url(:/icons/unchecked.png)}

3.4.2、当半选的时候

QCheckBox::indicator::indeterminate {border-image: url(:/icons/indeterminate.png)}

3.4.3、当选中的时候

QCheckBox::indicator::checked {border-image: url(:/icons/checked.png)}

3.4.4、设置CheckBox的大小
 

QCheckBox::indicator {width:20px; height:20px}

4、代码分享

代码:

https://pan.baidu.com/s/16YMIOTOuEO6S8gaOO-40nQ

提取码

fann

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值