按钮(Buttons)
按钮在 Qt 中的重要性
按钮是 Qt 中最常用的控件之一
通过点击按钮,可以响应事件,实现人机交互效果
按钮在嵌入式系统和 PC 端的界面交互中都是不可或缺的
Qt 内置的六种按钮部件
QPushButton:下压按钮
-
用法示例
-
项目创建与设置
-
项目名称:创建一个名为 04_qpushbutton 的新项目
-
项目设置:在新建例程时,不勾选“Generate form”,默认继承 QMainWindow 类
-
-
mainwindow.h 头文件的编写
-
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include
5 /* 引入 QPushButton 类 */
6 #include
7
8 class MainWindow : public QMainWindow
9{
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget parent = nullptr);
14 ~MainWindow();
15
16 private:
17 / 声明一个 QPushButton 对象 pushButton1 */
18 QPushButton pushButton1;
19 / 声明一个 QPushButton 对象 pushButton2 */
20 QPushButton pushButton2;
21
22 private slots:
23 / 声明对象 pushButton1 的槽函数 /
24 void pushButton1_Clicked();
25 / 声明对象 pushButton2 的槽函数 */
26 void pushButton2_Clicked();
27 };
28 #endif // MAINWINDOW_H -
引入必要的头文件
- 第 6 行:引入 QPushButton 类
-
类声明
- 第 8-27 行:MainWindow 类继承自 QMainWindow,包含两个 QPushButton 对象及其槽函数
-
QPushButton 对象声明
-
第 18 行:声明 QPushButton 对象 pushButton1
-
第 20 行:声明 QPushButton 对象 pushButton2
-
-
槽函数声明
-
第 24 行:声明 pushButton1 的槽函数 pushButton1_Clicked
-
第 26 行:声明 pushButton2 的槽函数 pushButton2_Clicked
-
-
-
mainwindow.cpp 文件的编写
-
1 #include “mainwindow.h”
2
3 MainWindow::MainWindow(QWidget parent)
4 : QMainWindow(parent)
5{
6 / 设置宽高为 800×480,位置在 0, 0。(0, 0)代表原点,Qt 默认最左上角的点为原点 /
7 this->setGeometry(0, 0, 800, 480);
8
9 / 实例化两个按钮对象,并设置其显示文本为窗口皮肤 1 和窗口皮肤 2 /
10 pushButton1 = new QPushButton(“窗口皮肤 1”, this);
11 pushButton2 = new QPushButton(“窗口皮肤 2”, this);
12
13 / 设定两个 QPushButton 对象的位置 /
14 pushButton1->setGeometry(300,200,80,40);
15 pushButton2->setGeometry(400,200,80,40);
16
17 / 信号槽连接 /
18 connect(pushButton1, SIGNAL(clicked()), this,
SLOT(pushButton1_Clicked()));
19 connect(pushButton2, SIGNAL(clicked()), this,
SLOT(pushButton2_Clicked()));
20 }
21
22 MainWindow::~MainWindow()
23 {
24 }
25
26 / 槽函数的实现 /
27 void MainWindow::pushButton1_Clicked()
28 {
29 / 设置主窗口的样式 1 /
30 this->setStyleSheet(“QMainWindow { background-color: rgba(255, 245,
238, 100%); }”);
31 }
32
33 / 槽函数的实现 /
34 void MainWindow::pushButton2_Clicked()
35 {
36 / 设置主窗口的样式 2 */
37 this->setStyleSheet(“QMainWindow { background-color: rgba(238, 122,
233, 100%); }”);
38 } -
构造函数设置
-
第 7 行:设置程序窗口的显示位置为 (0, 0),大小为 800x480。在 Ubuntu 中如果不设置,窗口可能出现在任意位置,而在 Windows 中通常显示在中间
-
第 10-11 行:实例化 QPushButton 对象 pushButton1 和 pushButton2,并设置显示文本为“窗口皮肤 1”和“窗口皮肤 2”
-
-
按钮布局
- 第 14-15 行:设置两个按钮的大小和位置。按钮大小不能过小,否则可能导致文本显示不全
-
信号与槽的连接
- 第 18-19 行:连接两个 QPushButton 对象的 clicked 信号与槽函数 pushButton1_Clicked 和 pushButton2_Clicked
-
槽函数的实现
-
第 27-31 行:实现 pushButton1_Clicked 槽函数,设置主窗口的样式 1,背景颜色为 rgba(255, 245, 238, 100%)
-
第 33-37 行:实现 pushButton2_Clicked 槽函数,设置主窗口的样式 2,背景颜色为 rgba(238, 122, 233, 100%)
-
-
-
main.cpp 源代码
-
1 #include “mainwindow.h”
2
3 #include
4
5 int main(int argc, char *argv[])
6{
7 QApplication a(argc, argv);
8 MainWindow w;
9 w.show();
10 return a.exec();
11 } -
第 5-11 行:定义主函数,创建 QApplication 对象,实例化 MainWindow 对象 w 并显示窗口,进入应用程序事件循环
-
-
-
运行效果
-
程序编译及运行后
-
点击窗口皮肤 2 按钮
-
QToolButton:工具按钮
QRadioButton:单选按钮
-
控件简介
-
概述
-
QRadioButton 是一个提供带有文本标签的单选框(单选按钮)的控件
-
它用于在界面上提供一种选择方式,用户可以在多个选项中选择一个
-
-
状态切换功能
-
QRadioButton 可以在选中(checked)和未选中(unchecked)状态之间切换
-
用户可以通过点击按钮来改变其状态
-
-
多选一的选择逻辑
-
QRadioButton 通常用于“多选一”的选择场景
-
在一组单选框中,用户一次只能选中其中一个选项
-
-
默认互斥行为
-
当多个 QRadioButton 存在于同一个父对象下时,它们默认是互斥的
-
这意味着在初始化后,点击其中一个按钮会自动取消其他按钮的选中状态
-
-
-
用法示例
-
概述
-
实现类似手机开关的效果
-
使用工具:项目中将使用 Qt 样式表(QSS)来实现视觉效果
-
-
样式表的重要性
-
QSS 的作用:样式表使得我们能够创建具有实际应用和炫酷效果的界面
-
QSS 与 Qt:类似于 HTML 的 CSS,QSS 是纯文本格式的样式定义文件,可以在应用程序运行时加载,从而改变 GUI 元素的外观和行为
-
-
项目设置
-
新建例程:在新建项目时,不需要勾选“Generate form”,默认继承 QMainWindow 类
-
资源文件:需要添加资源文件,并按特定步骤进行设置
-
右键项目:选择 “Add New…”
-
选择模板:在弹出的对话框中,选择 Qt 模板,然后选择 “Qt Resource Files”,点击 “Choose”
-
命名资源文件:为资源文件命名(例如 res),并将其默认添加到项目路径下。完成后点击“Finish”
-
编辑资源文件
-
进入编辑模式:新建资源文件后,会默认进入 res.qrc 文件的编辑模式。如果编辑器关闭了,可以通过右键点击文件并选择“Open in Editor”重新打开
-
添加前缀:点击 “Add Prefix”,在资源文件中添加前缀 /。这个前缀有助于分类管理文件,类似于 Linux 的根节点
-
-
添加资源图片
-
创建 images 文件夹:手动在项目路径下创建 images 文件夹
-
添加图片:在 res.qrc 文件中,添加在 /images 前缀下的图片资源
-
保存资源文件:完成资源添加后,按 Ctrl + S 保存文件,以确保资源在项目中正确显示
-
-
添加 QSS 文件
-
QSS 文件介绍:QSS 文件是用于定义 Qt 应用程序界面样式的文件,可以控制布局、颜色、鼠标行为、大小和字体等
-
新建 QSS 文件:创建一个名为 style.qss 的 QSS 文件,将其默认添加到项目路径下
-
-
新建 QSS 文件的步骤
-
选择添加路径:默认情况下,QSS 文件会被添加到项目的根目录下
-
完成创建:在完成后,QSS 文件会显示在项目目录中
-
-
QSS 文件的用途
-
自定义界面:通过编辑 QSS 文件,可以为 Qt 应用程序创建定制的视觉效果,使其界面与众不同
-
动态加载:QSS 文件可以在应用程序运行时加载和解析,方便进行界面样式的动态调整
-
-
-
mainwindow.h
-
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include
5 /* 引入 QRadioButton */
6 #include
7
8 class MainWindow : public QMainWindow
9{
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget parent = nullptr);
14 ~MainWindow();
15
16 private:
17 / 声明两个 QRadioButton 对象 */
18 QRadioButton *radioButton1;
19 QRadioButton *radioButton2;
20 };
21 #endif // MAINWINDOW_H -
文件保护符
- 使用 #ifndef 和 #define 防止头文件重复包含
-
引入必要的库
-
第 4 行:引入 QMainWindow 头文件,这是所有主窗口类的基类
-
第 6 行:引入 QRadioButton 头文件,用于创建单选按钮控件
-
-
定义主窗口类 MainWindow
-
第 8 行:定义 MainWindow 类,继承自 QMainWindow
-
第 10 行:使用 Q_OBJECT 宏,这是 Qt 信号与槽机制所必需的
-
-
类的公共部分
-
第 13 行:定义构造函数 MainWindow(QWidget *parent = nullptr)
-
第 14 行:定义析构函数 ~MainWindow()
-
-
类的私有部分
- 第 16-19 行:声明两个 QRadioButton 对象 radioButton1 和 radioButton2,用于实现单选按钮功能
-
-
mainwindow.cpp
-
1 #include “mainwindow.h”
2
3 MainWindow::MainWindow(QWidget parent)
4 : QMainWindow(parent)
5{
6 / 主窗体设置位置和显示的大小 /
7 this->setGeometry(0, 0, 800, 480);
8 this->setStyleSheet(“QMainWindow {background-color: rgba(200, 50,
100, 100%);}”);
9
10 / 实例化对象 /
11 radioButton1 = new QRadioButton(this);
12 radioButton2 = new QRadioButton(this);
13
14 / 设置两个 QRadioButton 的位置和显示大小 /
15 radioButton1->setGeometry(300, 200, 100, 50);
16 radioButton2->setGeometry(400, 200, 100, 50);
17
18 / 设置两个 QRadioButton 的显示文本 /
19 radioButton1->setText(“开关一”);
20 radioButton2->setText(“开关二”);
21
22 / 设置初始状态,radioButton1 的 Checked 为 false,另一个为 true*/
23 radioButton1->setChecked(false);
24 radioButton2->setChecked(true);
25 }
26
27 MainWindow::~MainWindow()
28 {
29 } -
引入头文件
- 第 1 行:引入 mainwindow.h 头文件
-
构造函数 MainWindow::MainWindow(QWidget *parent) 的实现
-
第 4 行:调用 QMainWindow 构造函数
-
第 7 行:设置主窗口的位置和大小,尺寸为 800x480 像素
-
第 8 行:通过 setStyleSheet 设置主窗口的背景颜色
-
-
实例化 QRadioButton 对象
- 第 11-12 行:分别实例化 radioButton1 和 radioButton2,并将它们的父对象设置为 this(主窗口)
-
设置 QRadioButton 的位置和大小
-
第 15 行:设置 radioButton1 的位置为 (300, 200) 并且大小为 100x50 像素
-
第 16 行:设置 radioButton2 的位置为 (400, 200) 并且大小为 100x50 像素
-
-
设置 QRadioButton 的显示文本
-
第 19 行:设置 radioButton1 的文本为“开关一”
-
第 20 行:设置 radioButton2 的文本为“开关二”
-
-
设置初始状态
-
第 23 行:设置 radioButton1 的初始选中状态为 false
-
第 24 行:设置 radioButton2 的初始选中状态为 true,使得两个按钮互斥
-
-
析构函数 MainWindow::~MainWindow() 的实现
- 第 27-29 行:析构函数为空,因为没有动态分配的资源需要手动释放
-
-
main.cpp
-
1 #include “mainwindow.h”
2
3 #include
4 /* 引入 QFile */
5 #include
6
7 int main(int argc, char argv[])
8{
9 QApplication a(argc, argv);
10 / 指定文件 /
11 QFile file(“:/style.qss”);
12
13 / 判断文件是否存在 /
14 if (file.exists() ) {
15 / 以只读的方式打开 /
16 file.open(QFile::ReadOnly);
17 / 以字符串的方式保存读出的结果 /
18 QString styleSheet = QLatin1String(file.readAll());
19 / 设置全局样式 /
20 qApp->setStyleSheet(styleSheet);
21 / 关闭文件 */
22 file.close();
23 }
24 MainWindow w;
25 w.show();
26 return a.exec();
27 } -
引入头文件
-
第 1 行:引入 mainwindow.h 头文件
-
第 5 行:引入 QFile 头文件,用于处理文件操作
-
-
main 函数的实现
-
第 9 行:创建 QApplication 对象 a,负责管理应用程序的控制流和主要设置
-
第 11 行:指定 style.qss 文件的路径
-
-
加载 QSS 文件
-
第 14 行:判断 style.qss 文件是否存在
-
第 16 行:以只读模式打开 style.qss 文件
-
第 18 行:读取文件内容并将其转换为字符串
-
第 20 行:设置全局样式为读取的样式表内容
-
第 22 行:关闭文件
-
-
显示主窗口
-
第 24 行:创建 MainWindow 对象 w 并显示窗口
-
第 26 行:调用 a.exec() 进入应用程序的事件循环
-
-
-
样式表 style.qss
-
1 QRadioButton{
2 spacing: 2px;
3 color: white;
4}
5 QRadioButton::indicator {
6 width: 45px;
7 height: 30px;
8}
9 QRadioButton::indicator:unchecked {
10 image: url(:/images/switch_off.png);
11 }
12 QRadioButton::indicator:checked {
13 image: url(:/images/switch_on.png);
14 } -
QRadioButton 的基本样式
-
第 2 行:设置单选按钮之间的间距为 2px
-
第 3 行:设置文本颜色为白色
-
-
QRadioButton 的指示器样式
- 第 5-8 行:设置单选按钮的指示器(indicator)的宽度为 45px,高度为 30px
-
指示器的背景图片
-
第 10 行:未选中状态下,指示器的背景图片为 switch_off.png
-
第 13 行:选中状态下,指示器的背景图片为 switch_on.png
-
-
-
-
-
运行效果
- 点击关闭开关一,开关二即打开;点击开关二,开关一即打开
QCheckBox:复选框
-
控件简介
-
QCheckBox 继承 QAbstractButton
-
复选按钮(复选框)与 RadioButton 的区别是选择模式,单选按钮提供多选一,复选按钮提供多选多
-
-
用法示例
-
新建例程
-
在新建项目时,不需要勾选“Generate form”,默认继承 QMainWindow 类
-
添加qss 文件和三张资源图片
-
-
mainwindow.h
-
1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include
5 /* 引入 QCheckBox */
6 #include
7
8 class MainWindow : public QMainWindow
9{
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget parent = nullptr);
14 ~MainWindow();
15
16 private:
17 / 声明一个 QCheckBox 对象 */
18 QCheckBox checkBox;
19 private slots:
20 / 声明 QCheckBox 的槽函数,并带参数传递,用这个参数接收信号的参数 */
21 void checkBoxStateChanged(int);
22
23 };
24 #endif // MAINWINDOW_H -
第 18 和 19 行声明两个 QCheckBox 对象
-
-
mainwindow.cpp
-
1 #include “mainwindow.h”
2
3 MainWindow::MainWindow(QWidget parent)
4 : QMainWindow(parent)
5{
6 / 主窗体设置位置和显示的大小及背景颜色 /
7 this->setGeometry(0, 0, 800, 480);
8 this->setStyleSheet(“QMainWindow {background-color: rgba(100, 100,
100, 100%);}”);
9
10 / 实例化对象 /
11 checkBox = new QCheckBox(this);
12
13 / 设置 QCheckBox 位置和显示大小 /
14 checkBox->setGeometry(350, 200, 250, 50);
15
16 / 初始化三态复选框的状态为 Checked /
17 checkBox->setCheckState(Qt::Checked);
18
19 / 设置显示的文本 /
20 checkBox->setText(“初始化为 Checked 状态”);
21
22 / 开启三态模式,必须开启,否则只有两种状态,即 Checked 和 Unchecked /
23 checkBox->setTristate();
24
25 / 连接 checkBox 的信号 stateChanged(int),与我们定义的槽
checkBoxStateChanged(int)连接 /
26 connect(checkBox, SIGNAL(stateChanged(int)), this,
SLOT(checkBoxStateChanged(int)));
27 }
28
29 MainWindow::~MainWindow()
30 {
31 }
32
33 / 槽函数的实现 /
34 void MainWindow::checkBoxStateChanged(int state)
35 {
36 / 判断 checkBox 的 state 状态,设置 checkBox 的文本 /
37 switch (state) {
38 case Qt::Checked:
39 / 选中状态 /
40 checkBox->setText(“Checked 状态”);
41 break;
42 case Qt::Unchecked:
43 / 未选中状态 /
44 checkBox->setText(“Unchecked 状态”);
45 break;
46 case Qt::PartiallyChecked:
47 / 半选状态 */
48 checkBox->setText(“PartiallyChecked 状态”);
49 break;
50 default:
51 break;
52 }
53 } -
第 23 行,需要注意的是设置 QCheckBox 对象 checkBox 需要设置为三态模式
-
-
main.cpp
-
1 #include “mainwindow.h”
2
3 #include
4 /* 引入 QFile */
5 #include
6
7 int main(int argc, char argv[])
8{
9 QApplication a(argc, argv);
10 / 指定文件 /
11 QFile file(“:/style.qss”);
12
13 / 判断文件是否存在 /
14 if (file.exists() ) {
15 / 以只读的方式打开 /
16 file.open(QFile::ReadOnly);
17 / 以字符串的方式保存读出的结果 /
18 QString styleSheet = QLatin1String(file.readAll());
19 / 设置全局样式 /
20 qApp->setStyleSheet(styleSheet);
21 / 关闭文件 */
22 file.close();
23 }
24 MainWindow w;
25 w.show();
26 return a.exec();
27 } -
第 11 行至 23 行,读取 style.qss 的内容。并设置全局样式
-
-
style.qss
-
1 QCheckBox{
2 spacing: 5px;
3 color: white;
4}
5 QCheckBox::indicator {
6 width: 50px;
7 height: 50px;
8}
9 QCheckBox::indicator:enabled:unchecked {
10 image: url(:/images/unchecked.png);
11 }
12 QCheckBox::indicator:enabled:checked {
13 image: url(:/images/checked.png);
14 }
15 QCheckBox::indicator:enabled:indeterminate {
16 image: url(:/images/indeterminate.png);
indicator:enabled:unchecked {
10 image: url(:/images/unchecked.png);
11 }
12 QCheckBox::indicator:enabled:checked {
13 image: url(:/images/checked.png);
14 }
15 QCheckBox::indicator:enabled:indeterminate {
16 image: url(:/images/indeterminate.png);
17 } -
在第 10 行和第 13 行,设置 QCheckBox 的 indicator 的背景图片
-
-
-
运行效果
-
选中状态
-
半选状态
-
未选中状态
-
QCommandLinkButton:命令链接按钮
QDialogButtonBox:对话框按钮
六种按钮部件的简要介绍
QPushButton
-
继承自 QAbstractButton 类
-
通常用于执行命令或触发事件
-
被 QCommandLinkButton 继承
QToolButton
-
继承自 QAbstractButton 类
-
用于命令或选项的快速访问按钮,常用于工具栏 (ToolBar) 中
-
工具按钮通常显示图标而非文本标签,支持自动浮起功能
QRadioButton
-
继承自 QAbstractButton 类
-
单选按钮通常成组出现,用于提供两个或多个互斥选项
QCheckBox
-
继承自 QAbstractButton 类
-
复选框与单选按钮的区别在于选择模式,复选框支持多选多,而单选按钮仅支持多选一
QCommandLinkButton
-
继承自 QPushButton 类
-
命令链接按钮用于在互斥选项中选择一项
-
与普通按钮类似,但默认带有箭头图标,表示点击按钮将打开另一个窗口或页面
QDialogButtonBox
-
继承自 QWidget 类
-
常用于对话框中自定义按钮,如“确定”和“取消”按钮
进一步学习与使用
这些按钮的可用属性、信号与槽可在 Qt 帮助文档中查阅
undefined
undefined
undefined
undefined
undefined
undefined