按钮(Buttons)-Qt-思维导图-学习笔记

木木不迷茫(˵¯͒¯͒˵)

于 2024-08-13 14:45:00 发布

阅读量923

点赞数 27

分类专栏：嵌入式Qt开发文章标签： qt 学习笔记

本文链接：https://blog.csdn.net/weixin_62434750/article/details/141141017

版权

嵌入式Qt开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

按钮(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 的背景图片
运行效果
- 选中状态
- 半选状态
- 未选中状态