OpenEdv-开源电子网

 找回密码
 立即注册
正点原子全套STM32/Linux/FPGA开发资料，上千讲STM32视频教程免费下载...
OpenEdv-开源电子网»首页 › 操作系统/图形界面 › Linux › 《I.MX6U 嵌入式Qt开发指南》第七章 Qt控件 7.1 按钮
返回列表 发新帖
查看: 2672|回复: 0

《I.MX6U 嵌入式Qt开发指南》第七章 Qt控件 7.1 按钮

[复制链接]
正点原子运营

1070

主题

1081

帖子

2

精华

超级版主

Rank: 8Rank: 8

积分
4443
金钱
4443
注册时间
2019-5-8
在线时间
1199 小时
发表于 2022-7-23 15:20:45 | 显示全部楼层 |阅读模式
正点原子逻辑分析仪DL16热卖中，最多16通道，采样率最高可达1GHz，存储深度可达3.5Gbit
本帖最后由 正点原子运营 于 2022-7-23 15:23 编辑

1）实验平台：正点原子阿尔法Linux开发板
2)  章节摘自【正点原子】《I.MX6U 嵌入式Qt开发指南》
3）购买链接:https://detail.tmall.com/item.htm?id=609033604451
4）全套实验源码+手册+视频下载地址：http://www.openedv.com/docs/boards/arm-linux/zdyz-i.mx6ull.html
5）正点原子官方B站：https://space.bilibili.com/394620890
6）正点原子阿尔法Linux交流群：1027879335





第七章 Qt控件

      老子曾说：“天下难事，必做于易；天下大事，必做于细”。再复杂的项目，都是由一个个小小的部分组成，只有掌握了Qt的基本，遇到大项目也不用担心了！从这章开始我们开始学习Qt的窗口部件，其中每种类型的窗口部件都选取一个作为例子讲解它们的用法，通过例子大家能举一反三。本章也是纯代码编程，不使用Qt Designer图形界面开发程序。编者认为纯代码编程的代码容易让人看懂，在Qt Designer里设计就显得没有过多逻辑可言。在这章里我们可以学习常用的控件初始化方法，设置窗体的大小位置，颜色，文本，设计创意的例子快速学习各类控件的使用方法，力求把例子写的实用，代码注释详细。因为控件非常多，如果觉得学习控件枯燥，可以等用到这个控件（部件）时再参考，不必要一次性全部掌握，这章节的目的是了解Qt控件类型及使用方法。
      值得留意的小节是7.1.3小节，该小节讲解如何添加资源图片和qss文件。后面的例程都可以参考7.1.3小节添加资源图片，不再重复写这种添加步骤。
      第7.8和7.9小节，我们在嵌入式里经常用于处理数据，建立模型，应该花多点时间学习这两个小节。

7.1 按钮
     在Qt里，最常用使用的控件就是按钮了，有了按钮，我们就可以点击，从而响应事件，达到人机交互的效果。不管是嵌入式或者PC端，界面交互，少不了按钮。
     Qt 按钮部件是一种常用的部件之一，Qt内置了六种按钮部件如下：
image002.jpg

（1）           QPushButton:下压按钮
（2）           QToolButton:工具按钮
（3）           QRadioButton:选择按钮
（4）           QCheckBox:检查框
（5）           QCommandLinkButton:命令链接按钮
（6）           QDialogButtonBox:对话框按钮
      这六种按钮部件作用简介如下：
      QPushButton继承QAbstractButton类，被QCommandLinkButton继承。通常用于执行命令或触发事件。
      QToolButton继承QAbstractButton类。是一种用于命令或者选项的可以快速访问的按钮，通常在ToolBar里面。工具按钮通常显示的是图标，而不是文本标签。ToolButton支持自动浮起。在自动浮起模式中，按钮只有在鼠标指向它的时候才绘制三维的框架。
      QRadioButton继承QAbstractButton类。RadioButton单选按钮（单选框）通常成组出现，用于提供两个或多个互斥选项。
      QCheckBox继承QAbstractButton。复选按钮（复选框）与RadioButton的区别是选择模式，单选按钮提供多选一，复选按钮提供多选多。
      QCommandLinkButton控件中文名是“命令链接按钮”。QCommandLinkButton继承QPushButton。QCommandLinkButton控件和RadioButton相似，都是用于在互斥选项中选择一项。表面上同平面按钮一样，但是CommandLinkButton除带有正常的按钮上的文字描述文本外，默认情况下，它也将携带一个箭头图标，表明按下按钮将打开另一个窗口或页面。
      QDialogButtonBox按钮盒子（按钮框），是由QDialogButtonBox类包装成的。QDialogButtonBox继承QWidget。常用于对话框里自定义按钮，比如“确定”和“取消”按钮。
      上面说的六种按钮的可用属性，信号和槽，需要用到时可在Qt帮助文档里查看。这里我们就略过介绍它们可用属性和信号与槽了。下面我们通过例子讲解每种按钮是如何使用，一起探究它们究竟能实现什么效果。

7.1.1 QPushButton7.1.1.1 控件简介
      在第四章里我们就已经接触过QPushButton了，在Qt Designer里连接信号与槽，从而实现了关闭程序的功能。下面开始重新用编写程序的方法实现使用QPushButton连接信号和槽实现一个小例子。

7.1.1.2 用法示例
      例04_qpushbutton窗口换肤（难度：简单），通过单击不同的按钮，改变窗口的颜色。
新建一个项目名称为为04_qpushbutton，在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。如果还不会新建一个项目，建议回到3.6小节查看如何新建一个项目。完成如下图。
image004.jpg
      在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QPushButton类 */
  7. 6   #include <QPushButton>
  8. 7
  9. 8   class MainWindow : public QMainWindow
  10. 9   {
  11. 10      Q_OBJECT
  12. 11
  13. 12  public:
  14. 13      MainWindow(QWidget *parent = nullptr);
  15. 14      ~MainWindow();
  16. 15
  17. 16  private:
  18. 17      /* 声明一个QPushButton对象pushButton1 */
  19. 18      QPushButton *pushButton1;
  20. 19      /* 声明一个QPushButton对象pushButton2 */
  21. 20      QPushButton *pushButton2;
  22. 21
  23. 22  private slots:
  24. 23      /* 声明对象pushButton1的槽函数 */
  25. 24      void pushButton1_Clicked();
  26. 25      /* 声明对象pushButton2的槽函数 */
  27. 26      void pushButton2_Clicked();
  28. 27  };
  29. 28  #endif // MAINWINDOW_H
复制代码
       第6行，引入QPushButton类。
       第18和20行，声明两个QPushButton的对象。
       第24和26行，声明两个QPushButton对象的槽函数。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   MainWindow::MainWindow(QWidget *parent)
  5. 4       : QMainWindow(parent)
  6. 5   {
  7. 6       /* 设置宽高为800×480,位置在0, 0。（0, 0）代表原点，Qt默认最左上角的点为原点 */
  8. 7       this->setGeometry(0, 0, 800, 480);
  9. 8
  10. 9       /* 实例化两个按钮对象，并设置其显示文本为窗口皮肤1和窗口皮肤2 */
  11. 10      pushButton1 = new QPushButton("窗口皮肤1", this);
  12. 11      pushButton2 = new QPushButton("窗口皮肤2", this);
  13. 12
  14. 13      /* 设定两个QPushButton对象的位置 */
  15. 14      pushButton1->setGeometry(300,200,80,40);
  16. 15      pushButton2->setGeometry(400,200,80,40);
  17. 16
  18. 17      /* 信号槽连接 */
  19. 18      connect(pushButton1, SIGNAL(clicked()), this, SLOT(pushButton1_Clicked()));
  20. 19      connect(pushButton2, SIGNAL(clicked()), this, SLOT(pushButton2_Clicked()));
  21. 20  }
  22. 21
  23. 22  MainWindow::~MainWindow()
  24. 23  {
  25. 24  }
  26. 25
  27. 26  /* 槽函数的实现 */
  28. 27  void MainWindow::pushButton1_Clicked()
  29. 28  {
  30. 29      /* 设置主窗口的样式1 */
  31. 30      this->setStyleSheet("QMainWindow { background-color: rgba(255, 245, 238, 100%); }");
  32. 31  }
  33. 32
  34. 33  /* 槽函数的实现 */
  35. 34  void MainWindow::pushButton2_Clicked()
  36. 35  {
  37. 36      /* 设置主窗口的样式2 */
  38. 37      this->setStyleSheet("QMainWindow { background-color: rgba(238, 122, 233, 100%); }");
  39. 38  }
复制代码
       第7行，设置程序窗口的显示位置和显示大小，如果不设置，运行的程序窗口在Ubuntu里有可能在某个位置出现，而在Windows一般出现在中间。
       第10和11行，实际化QPushButton对象。在初始化的时候可以传入QString类型串，作为按钮的显示文本。
       第14行，设置按钮的大小和位置，按钮的大小不能设置过小，否则按钮上的文本可能显示不全。
       第18行和19行，连接两个QPushButton对象的信号与槽。
       第27行至38行，两个QPushButton的槽函数实现，设置主窗体的样式表，其中设置background-color的rgba参数即可改变窗体的背景颜色。关于什么是样式表，如何设置样式表，以后会以一个小节专门讲解。
       在源文件“main.cpp”具体代码如下，由新建项目时生成，无改动。
  1. mainwindow.cpp源代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4
  6. 5   int main(int argc, char *argv[])
  7. 6   {
  8. 7       QApplication a(argc, argv);
  9. 8       MainWindow w;
  10. 9       w.show();
  11. 10      return a.exec();
  12. 11  }
复制代码

7.1.1.3 运行效果
      程序编译及运行后，点击窗口皮肤1按钮，主窗体显示效果如下。
image006.jpg
      点击窗口皮肤2按钮，主窗体显示效果如下。
image008.jpg

7.1.2 QToolButton7.1.2.1 控件简介
      工具按钮（QToolButton）区别于普通按钮（QPushButton）的一点是，工具按钮（QToolButton）可以带图标。这里区别下图标和按钮的背景图片是不一样的。通常我们在QToolBar这种工具条（工具栏）上设置不同的按钮，如果这些按钮还带图标和文本，那么QToolButton是个不错的选择。

7.1.2.2 用法示例
      例05_qtoolbutton自定义工具栏（难度：简单）。
新建一个项目名称为05_qtoolbutton。在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
image010.jpg
      在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QToolButton类 */
  7. 6   #include <QToolButton>
  8. 7   /* 引入QToolBar类 */
  9. 8   #include <QToolBar>
  10. 9
  11. 10  class MainWindow : public QMainWindow
  12. 11  {
  13. 12      Q_OBJECT
  14. 13
  15. 14  public:
  16. 15      MainWindow(QWidget *parent = nullptr);
  17. 16      ~MainWindow();
  18. 17
  19. 18  private:
  20. 19      /* 声明一个QToolButton对象 */
  21. 20      QToolButton *toolButton;
  22. 21      /* 声明一个QToolBar对象 */
  23. 22      QToolBar *toolBar;
  24. 23  };
  25. 24  #endif // MAINWINDOW_H
复制代码
       第20和22行，声明QToolButton对象和QtoolBar对象。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2   #include <QApplication>
  4. 3   #include <QStyle>
  5. 4
  6. 5   MainWindow::MainWindow(QWidget *parent)
  7. 6       : QMainWindow(parent)
  8. 7   {
  9. 8       /* 设置主窗体的位置和大小 */
  10. 9       this->setGeometry(0, 0, 800, 480);
  11. 10
  12. 11      /* 实例化QToolBar对象 */
  13. 12      toolBar = new QToolBar(this);
  14. 13      /* 设置toolBar的位置和大小 */
  15. 14      toolBar->setGeometry(0, 0, 800, 100);
  16. 15
  17. 16      /* 实例化QStyle类对象，用于设置风格，调用系统类自带的图标 */
  18. 17      QStyle *style = QApplication::style();
  19. 18
  20. 19      /* 使用Qt自带的标准图标，可以在帮助文档里搜索QStyle::StandardPixmap */
  21. 20      QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);
  22. 21
  23. 22      /* 实例化QToolButton对象 */
  24. 23      toolButton = new QToolButton();
  25. 24
  26. 25      /* 设置图标 */
  27. 26      toolButton->setIcon(icon);
  28. 27      /* 设置要显示的文本 */
  29. 28      toolButton->setText("帮助");
  30. 29      /* 调用setToolButtonStyle()方法，设置toolButoon的样式，设置为文本置于图标下方 */
  31. 30      toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
  32. 31
  33. 32      /* 最后将toolButton添加到ToolBar里 */
  34. 33      toolBar->addWidget(toolButton);
  35. 34  }
  36. 35
  37. 36  MainWindow::~MainWindow()
  38. 37  {
  39. 38  }
复制代码
       这段代码的流程是，初始化toolBar（工具条/工具栏）对象，然后初始化toolButton（工具按钮）对象，设置工具按钮的样式。最后将toolButton（工具按钮）添加到toolBar（工具条/工具栏）上。这样就完成了自定义工具栏的设计。
在源文件“main.cpp”具体代码如下，由新建项目时生成，无改动。
  1. mainwindow.cpp源代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4
  6. 5   int main(int argc, char *argv[])
  7. 6   {
  8. 7       QApplication a(argc, argv);
  9. 8       MainWindow w;
  10. 9       w.show();
  11. 10      return a.exec();
  12. 11  }
复制代码

7.1.2.3 运行效果
      最终程序实现的效果如下。成功的将自定义的工具按钮嵌入工具栏中。在许多含有工具栏的软件都可以看到这种设计，都可以使用Qt来实现类似的功能。

7.1.3 QRadioButton
7.1.3.1 控件简介
      QRadioButton部件提供了一个带有文本标签的单选框（单选按钮）。
      QRadioButton是一个可以切换选中（checked）或未选中（unchecked）状态的选项按钮。单选框通常呈现给用户一个“多选一”的选择。也就是说，在一组单选框中，一次只能选中一个单选框。默认在同一个父对象下，初始化后点击它们是互斥状态。

7.1.3.2 用法示例
      例06_radiobutton仿手机开关效果（难度：中等）。本例将实现手机开关效果，需要使用到Qt样式表，加载qss样式表文件，与7.1.1小节类似，只是把样式表写到qss文件里了。这里我们慢慢接触Qt的样式表了，正因为有样式表我们才能写一些比较有实际应用的例子和比较炫的例子。
      在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
image014.jpg
       添加资源文件，按如下步骤。右键项目，选择Add New…。
image016.jpg

       选择一个模板，选择Qt模板，再选择Qt Resource Files，点击Choose。这里Qt模板我们就不详细说了，日后我们需要使用什么模板，用到再了解。现在没必要一下子各个模板的用法，实际上我们常用的不多。
image018.jpg

      填上资源文件的名称（可随意写一个，编者简写为res），默认添加项目路径下。后面的步骤默认即可，点击完成。
image020.jpg
       新建完成了资源文件后，默认会进入res.qrc文件编辑模式（如果关闭了，可以右键这个文件点击选择“Open in Editor”），点击Add Prefix添加前缀，添加前缀的目的是方便分类管理文件，比如我们现在第&#9322;处添加了前缀/。“/”一定需要写，否则会找不到路径，这有点像Linux的根节点一样。
image022.jpg
       添加了前缀后，我们添加资源图片，放在/images前缀的下面。这里我们准备了两张图片，在本项目路径images文件夹（images文件夹先手动创建）下。如下图步骤，添加完成需要按“Ctrl + S”保存res.qrc才会看到左边的结果。添加完成如下图。
image024.jpg
       添加qss文件。QSS文件是使用Qt程序相关联的样式表文件。它由GUI元素的外观和感觉，包括布局，颜色，鼠标的行为，大小和字体。它的风格，一个可以合并到一个UI（用户界面）。与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果。
image026.jpg
       新建一个style.qss文件，如下图，默认添加到项目的路径下，后面步骤默认即可，直至完成。
image028.jpg
       qss文件添加后如下图。
image030.jpg

       在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QRadioButton */
  7. 6   #include <QRadioButton>
  8. 7
  9. 8   class MainWindow : public QMainWindow
  10. 9   {
  11. 10      Q_OBJECT
  12. 11
  13. 12  public:
  14. 13      MainWindow(QWidget *parent = nullptr);
  15. 14      ~MainWindow();
  16. 15
  17. 16  private:
  18. 17      /* 声明两个QRadioButton对象 */
  19. 18      QRadioButton *radioButton1;
  20. 19      QRadioButton *radioButton2;
  21. 20  };
  22. 21  #endif // MAINWINDOW_H
复制代码
       在第18和19行声明两个QRadioButton对象。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   MainWindow::MainWindow(QWidget *parent)
  5. 4       : QMainWindow(parent)
  6. 5   {
  7. 6       /* 主窗体设置位置和显示的大小 */
  8. 7       this->setGeometry(0, 0, 800, 480);
  9. 8       this->setStyleSheet("QMainWindow {background-color: rgba(200, 50, 100, 100%);}");
  10. 9
  11. 10      /* 实例化对象 */
  12. 11      radioButton1 = new QRadioButton(this);
  13. 12      radioButton2 = new QRadioButton(this);
  14. 13
  15. 14      /* 设置两个QRadioButton的位置和显示大小 */
  16. 15      radioButton1->setGeometry(300, 200, 100, 50);
  17. 16      radioButton2->setGeometry(400, 200, 100, 50);
  18. 17
  19. 18      /* 设置两个QRadioButton的显示文本 */
  20. 19      radioButton1->setText("开关一");
  21. 20      radioButton2->setText("开关二");
  22. 21
  23. 22      /* 设置初始状态，radioButton1的Checked为false,另一个为true*/
  24. 23      radioButton1->setChecked(false);
  25. 24      radioButton2->setChecked(true);
  26. 25  }
  27. 26
  28. 27  MainWindow::~MainWindow()
  29. 28  {
  30. 29  }
复制代码
       第23行和24行，设置QRadioButton对象的初始化状态，让它们互斥。
       在源文件“main.cpp”具体代码如下。我们需要在main.cpp里加载qss文件。
  1. main.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4   /* 引入QFile */
  6. 5   #include <QFile>
  7. 6
  8. 7   int main(int argc, char *argv[])
  9. 8   {
  10. 9       QApplication a(argc, argv);
  11. 10      /* 指定文件 */
  12. 11      QFile file(":/style.qss");
  13. 12
  14. 13      /* 判断文件是否存在 */
  15. 14      if (file.exists() ) {
  16. 15          /* 以只读的方式打开 */
  17. 16          file.open(QFile::ReadOnly);
  18. 17          /* 以字符串的方式保存读出的结果 */
  19. 18          QString styleSheet = QLatin1String(file.readAll());
  20. 19          /* 设置全局样式 */
  21. 20          qApp->setStyleSheet(styleSheet);
  22. 21          /* 关闭文件 */
  23. 22          file.close();
  24. 23      }
  25. 24      MainWindow w;
  26. 25      w.show();
  27. 26      return a.exec();
  28. 27  }
复制代码
       第11行至23行，读取style.qss的内容。并设置全局样式。
       在源文件“style.qss”具体代码如下，与HTML里的css语法相似。如果不会写qss的内容，可以参考Qt帮助文档的内容，在里面搜索“qt style”。在里面找相关的例子参考，这里我们只是初步了解下这个qt style。
  1. style.qss编程后的代码
  2. 1   QRadioButton{
  3. 2       spacing: 2px;
  4. 3       color: white;
  5. 4   }
  6. 5   QRadioButton::indicator {
  7. 6       width: 45px;
  8. 7       height: 30px;
  9. 8   }
  10. 9   QRadioButton::indicator:unchecked {
  11. 10      image: url(:/images/switch_off.png);
  12. 11  }
  13. 12  QRadioButton::indicator:checked {
  14. 13      image: url(:/images/switch_on.png);
  15. 14  }
复制代码
       在第10行和第13行，设置QRadioButton的indicator的背景图片。这样当它们点击切换时就会看到类似开关切换的效果了。

7.1.3.3 运行效果
       编译程序运行的效果如下。点击关闭开关一，开关二即打开；点击开关二，开关一即打开。因为它们默认是互斥的效果。在某种情况下我们需要使用这种效果，比如我们在网上看视频时经常需要切换线路，线路可能有几种，但是只有一种是激活状态的，我们就可以应用到这个方向上。
image032.jpg
       在这个例子里我们学习到如何添加资源，步骤也详细，后面的例程都可参考这个例程来添加资源文件，不再详细讲解添加过程。我们已经初步了解了Qt的样式表文件，如果要做好看的界面Qt的样式表文件是少不了的。可能我们还不懂Qt样式表的语法，不知道如何下手。我们可以边学边了解，可以参考Qt帮助文档里的用法，qss的功能不止这么点。现在的重点是学习QRadioButton这个控件。

7.1.4 QCheckBox
7.1.4.1 控件简介
       QCheckBox继承QAbstractButton。复选按钮（复选框）与RadioButton的区别是选择模式，单选按钮提供多选一，复选按钮提供多选多。

7.1.4.2 用法示例
       例07_qcheckbox，三态选择框（难度：简单）。使用一个QCheckBox，用户通过点击可改变当选择框的状态。
       在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。编者已经添加了qss文件和三张资源图片。如果还不会添加qss文件和资源图片，请参考7.1.3小节。
image034.jpg
       在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QCheckBox  */
  7. 6   #include <QCheckBox>
  8. 7
  9. 8   class MainWindow : public QMainWindow
  10. 9   {
  11. 10      Q_OBJECT
  12. 11
  13. 12  public:
  14. 13      MainWindow(QWidget *parent = nullptr);
  15. 14      ~MainWindow();
  16. 15
  17. 16  private:
  18. 17      /* 声明一个QCheckBox对象 */
  19. 18      QCheckBox *checkBox;
  20. 19  private slots:
  21. 20      /* 声明QCheckBox的槽函数，并带参数传递，用这个参数接收信号的参数 */
  22. 21      void checkBoxStateChanged(int);
  23. 22
  24. 23  };
  25. 24  #endif // MAINWINDOW_H
复制代码
       在第18和19行声明两个QCheckBox对象。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   MainWindow::MainWindow(QWidget *parent)
  5. 4       : QMainWindow(parent)
  6. 5   {
  7. 6       /* 主窗体设置位置和显示的大小及背景颜色 */
  8. 7       this->setGeometry(0, 0, 800, 480);
  9. 8       this->setStyleSheet("QMainWindow {background-color: rgba(100, 100, 100, 100%);}");
  10. 9
  11. 10      /* 实例化对象 */
  12. 11      checkBox = new QCheckBox(this);
  13. 12
  14. 13      /* 设置QCheckBox位置和显示大小 */
  15. 14      checkBox->setGeometry(350, 200, 250, 50);
  16. 15
  17. 16      /* 初始化三态复选框的状态为Checked */
  18. 17      checkBox->setCheckState(Qt::Checked);
  19. 18
  20. 19      /* 设置显示的文本 */
  21. 20      checkBox->setText("初始化为Checked状态");
  22. 21
  23. 22      /* 开启三态模式，必须开启，否则只有两种状态，即Checked和Unchecked */
  24. 23      checkBox->setTristate();
  25. 24
  26. 25      /* 连接checkBox的信号stateChanged(int)，与我们定义的槽checkBoxStateChanged(int)连接 */
  27. 26      connect(checkBox, SIGNAL(stateChanged(int)), this, SLOT(checkBoxStateChanged(int)));
  28. 27  }
  29. 28
  30. 29  MainWindow::~MainWindow()
  31. 30  {
  32. 31  }
  33. 32
  34. 33  /* 槽函数的实现 */
  35. 34  void MainWindow::checkBoxStateChanged(int state)
  36. 35  {
  37. 36      /* 判断checkBox的state状态，设置checkBox的文本 */
  38. 37      switch (state) {
  39. 38      case Qt::Checked:
  40. 39          /* 选中状态 */
  41. 40          checkBox->setText("Checked状态");
  42. 41          break;
  43. 42      case Qt::Unchecked:
  44. 43          /* 未选中状态 */
  45. 44          checkBox->setText("Unchecked状态");
  46. 45          break;
  47. 46      case Qt::PartiallyChecked:
  48. 47          /* 半选状态 */
  49. 48          checkBox->setText("PartiallyChecked状态");
  50. 49          break;
  51. 50      default:
  52. 51          break;
  53. 52      }
  54. 53  }
复制代码
       第23行，需要注意的是设置QCheckBox对象checkBox需要设置为三态模式。
在源文件“main.cpp”具体代码如下。我们需要在main.cpp里加载qss文件。
  1. main.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4   /* 引入QFile */
  6. 5   #include <QFile>
  7. 6
  8. 7   int main(int argc, char *argv[])
  9. 8   {
  10. 9       QApplication a(argc, argv);
  11. 10      /* 指定文件 */
  12. 11      QFile file(":/style.qss");
  13. 12
  14. 13      /* 判断文件是否存在 */
  15. 14      if (file.exists() ) {
  16. 15          /* 以只读的方式打开 */
  17. 16          file.open(QFile::ReadOnly);
  18. 17          /* 以字符串的方式保存读出的结果 */
  19. 18          QString styleSheet = QLatin1String(file.readAll());
  20. 19          /* 设置全局样式 */
  21. 20          qApp->setStyleSheet(styleSheet);
  22. 21          /* 关闭文件 */
  23. 22          file.close();
  24. 23      }
  25. 24      MainWindow w;
  26. 25      w.show();
  27. 26      return a.exec();
  28. 27  }
复制代码
       第11行至23行，读取style.qss的内容。并设置全局样式。
       在源文件“style.qss”具体代码如下。
  1. style.qss编程后的代码
  2. 1   QCheckBox{
  3. 2           spacing: 5px;
  4. 3           color: white;
  5. 4   }
  6. 5   QCheckBox::indicator {
  7. 6           width: 50px;
  8. 7           height: 50px;
  9. 8   }
  10. 9   QCheckBox::indicator:enabled:unchecked {
  11. 10          image: url(:/images/unchecked.png);
  12. 11  }
  13. 12  QCheckBox::indicator:enabled:checked {
  14. 13          image: url(:/images/checked.png);
  15. 14  }
  16. 15  QCheckBox::indicator:enabled:indeterminate {
  17. 16          image: url(:/images/indeterminate.png);
  18. 17  }
复制代码

       在第10行和第13行，设置QCheckBox的indicator的背景图片。这样当它们点击切换时就会看到QCheckBox的三种选择状态了。

7.1.4.3 运行效果
       编译程序运行的效果如下，多次点击checkBox，即可看到QCheckBox的三种状态切换。
       选中状态时。
image036.jpg
       半选状态。
image038.jpg

       未选中状态。
image040.jpg

       我们经常在软件安装时可以看到这种三态选择框，如果我们设计的程序有多种选择的项也可以设计这种选择框。

7.1.5 QCommandLinkButton
7.1.5.1 控件简介
       QCommandLinkButton控件中文名是“命令链接按钮”。QCommandLinkButton继承QPushButton。CommandLinkButton控件和RadioButton相似，都是用于在互斥选项中选择一项。表面上同平面按钮一样，但是CommandLinkButton除带有正常的按钮上的文字描述文本外，默认情况下，它也将携带一个箭头图标，表明按下按钮将打开另一个窗口或页面。

7.1.5.2 示例用法
       例08_qcommandlinkbutton链接窗口（难度：简单）。使用一个QCommandLinkButton，点击打开系统的窗口。
       在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
image042.jpg
       在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QCommandLinkButton */
  7. 6   #include <QCommandLinkButton>
  8. 7
  9. 8   class MainWindow : public QMainWindow
  10. 9   {
  11. 10      Q_OBJECT
  12. 11
  13. 12  public:
  14. 13      MainWindow(QWidget *parent = nullptr);
  15. 14      ~MainWindow();
  16. 15
  17. 16  private:
  18. 17      /* 声明一个QCommandLinkButton对象 */
  19. 18      QCommandLinkButton *commandLinkButton;
  20. 19
  21. 20  private slots:
  22. 21      /* 声明槽函数，用于点击commandLinkButton后触发 */
  23. 22      void commandLinkButtonClicked();
  24. 23
  25. 24
  26. 25  };
  27. 26  #endif // MAINWINDOW_H
复制代码
       在第18行，声明一个QCommandLinkButton对象。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2   /* 引入桌面服务，用来打开系统文件夹对话框 */
  4. 3   #include <QDesktopServices>
  5. 4   /* 引入QUrl */
  6. 5   #include <QUrl>
  7. 6
  8. 7   MainWindow::MainWindow(QWidget *parent)
  9. 8       : QMainWindow(parent)
  10. 9   {
  11. 10      /* 主窗体设置位置和显示的大小 */
  12. 11      this->setGeometry(0, 0, 800, 480);
  13. 12      
  14. 13      /* 实例化对象 */
  15. 14      commandLinkButton = new QCommandLinkButton(
  16. 15                  "打开/home目录", "点击此将调用系统的窗口打开/home目录",this);
  17. 16      
  18. 17      /* 设置QCommandLinkButton位置和显示大小 */
  19. 18      commandLinkButton->setGeometry(300, 200, 250, 60);
  20. 19      
  21. 20      /* 信号槽连接 */
  22. 21      connect(commandLinkButton, SIGNAL(clicked()), this,
  23. 22              SLOT(commandLinkButtonClicked()));
  24. 23  }
  25. 24
  26. 25  MainWindow::~MainWindow()
  27. 26  {
  28. 27  }
  29. 28
  30. 29  void MainWindow::commandLinkButtonClicked()
  31. 30  {
  32. 31      /* 调用系统服务打开/home目录 */
  33. 32      QDesktopServices::openUrl(QUrl("file:////home/") );
  34. 33  }
复制代码
       第14行，实例化时原型是QCommandLinkButton:CommandLinkButton(const QString &text, const QString &description, QWidget *parent = nullptr)。
       在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。
  1. main.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4
  6. 5   int main(int argc, char *argv[])
  7. 6   {
  8. 7       QApplication a(argc, argv);
  9. 8       MainWindow w;
  10. 9       w.show();
  11. 10      return a.exec();
  12. 11  }
复制代码
7.1.5.3 运行效果
       程序编译运行的结果如下。
       点击中间的打开/home目录按钮，结果如下。系统弹出一个窗口，直接打开到/home目录。
image044.jpg
       点击打开/home目录后，系统将弹出/home目录路径窗口。
image046.jpg

7.1.6 QDialogButtonBox
7.1.6.1件简介 控
      对话框和消息框通常以符合该平台界面指导原则的布局呈现按钮。不同平台的对话框总是有不同的布局。QDialogButtonBox允许开发人员向其添加按钮，并将自动使用适合用户桌面环境的布局。也就是说我们可以使用系统的自带的对话框按钮，也可以自己定义对话框按钮。
      QDialogButtonBox常用的按钮有如下几种，更多的可以参考Qt帮助文档。
button_Box = new QDialogButtonBox(QDialogButtonBox::Ok
                                      | QDialogButtonBox::Cancel
                                      | QDialogButtonBox::Open
                                      | QDialogButtonBox::Save
                                      | QDialogButtonBox::Close
                                      | QDialogButtonBox:iscard
                                      | QDialogButtonBox::Apply
                                      | QDialogButtonBox::Reset
                                      | QDialogButtonBox::RestoreDefaults
                                      | QDialogButtonBox::Help
                                      | QDialogButtonBox::SaveAll);

7.1.6.2 用法示例
       例09_qdialogbuttonbox， 自定义QDialogButtonBox里的按钮（难度：简单）。使用一个QDialogButtonBox，在QDialogButtonBox添加Qt提供的按钮，或者自定义按钮。
在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。
image048.jpg

       在头文件“mainwindow.h”具体代码如下。
  1. mainwindow.h编程后的代码
  2. 1   #ifndef MAINWINDOW_H
  3. 2   #define MAINWINDOW_H
  4. 3
  5. 4   #include <QMainWindow>
  6. 5   /* 引入QDialogButtonBox */
  7. 6   #include <QDialogButtonBox>
  8. 7   /* 引入QPuhsButton */
  9. 8   #include <QPushButton>
  10. 9
  11. 10  class MainWindow : public QMainWindow
  12. 11  {
  13. 12      Q_OBJECT
  14. 13
  15. 14  public:
  16. 15      MainWindow(QWidget *parent = nullptr);
  17. 16      ~MainWindow();
  18. 17
  19. 18  private:
  20. 19      /* 声明一个QDialogButtonBox对象 */
  21. 20      QDialogButtonBox *dialogButtonBox;
  22. 21
  23. 22      /* 声明一个QPushButton对象 */
  24. 23      QPushButton *pushButton;
  25. 24
  26. 25  private slots:
  27. 26      /* 声明信号槽，带QAbstractButton *参数，用于判断点击了哪个按钮 */
  28. 27      void dialogButtonBoxClicked(QAbstractButton *);
  29. 28
  30. 29  };
  31. 30  #endif // MAINWINDOW_H
复制代码
       第18行，声明一个QDialogButtonBox对象。
       在源文件“mainwindow.cpp”具体代码如下。
  1. mainwindow.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2   /* 引入QDebug */
  4. 3   #include <QDebug>
  5. 4
  6. 5   MainWindow::MainWindow(QWidget *parent)
  7. 6       : QMainWindow(parent)
  8. 7   {
  9. 8       /* 主窗体设置位置和显示的大小 */
  10. 9       this->setGeometry(0, 0, 800, 480);
  11. 10
  12. 11      /* 实例化并设置按钮的盒子的大小和位置 */
  13. 12      dialogButtonBox = new  QDialogButtonBox(this);
  14. 13      dialogButtonBox->setGeometry(300, 200, 200, 30);
  15. 14
  16. 15      /*使用Qt的Cancel按钮*/
  17. 16      dialogButtonBox->addButton(QDialogButtonBox::Cancel);
  18. 17
  19. 18      /*将英文"Cancel"按钮设置为中文"取消" */
  20. 19      dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");
  21. 20
  22. 21      /* 设定位置与大小 */
  23. 22      pushButton = new QPushButton(tr("自定义"));
  24. 23
  25. 24      /* 将pushButton添加到dialogButtonBox，并设定ButtonRole为ActionRole */
  26. 25      dialogButtonBox->addButton(pushButton, QDialogButtonBox::ActionRole);
  27. 26
  28. 27      /* 信号槽连接，带参数QAbstractButton *，用于判断用户点击哪个按键 */
  29. 28      connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),
  30. 29              this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
  31. 30  }
  32. 31
  33. 32  MainWindow::~MainWindow()
  34. 33  {
  35. 34  }
  36. 35
  37. 36  void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
  38. 37  {
  39. 38      /* 判断点击的对象是否为QDialogButtonBox::Cancel */
  40. 39      if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
  41. 40          /* 打印“单击了取消键” */
  42. 41          qDebug() <<"单击了取消键"<<endl;
  43. 42          /* 判断点击的对象是否为pushButton */
  44. 43      }else if(button == pushButton) {
  45. 44          /* 打印“单击了自定义键” */
  46. 45          qDebug() <<"单击了自定义键"<<endl;
  47. 46      }
  48. 47  }
复制代码
       第16行，实例化时原型是void QDialogButtonBox::addButton(QAbstractButton *button, QDialogButtonBox::ButtonRole role)。
       第41和45行，我们第一次用qDebug()。Qt一般调试都是用qDebug()来打印的。这与C++的cout是功能基本一样。只是Qt自定义为qDebug()而已。
       在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。
  1. main.cpp编程后的代码
  2. 1   #include "mainwindow.h"
  3. 2
  4. 3   #include <QApplication>
  5. 4
  6. 5   int main(int argc, char *argv[])
  7. 6   {
  8. 7       QApplication a(argc, argv);
  9. 8       MainWindow w;
  10. 9       w.show();
  11. 10      return a.exec();
  12. 11  }
复制代码
7.1.6.3 运行效果
       程序编译运行的结果如下。点击自定义按钮和取消按钮，在应用程序输出窗口可以看到对应的点击事件。
image050.jpg







【正点原子Linux】

相关帖子

正点原子逻辑分析仪DL16劲爆上市
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



关闭

原子哥极力推荐上一条 /2 下一条

正点原子公众号

QQ|手机版|OpenEdv-开源电子网 ( 粤ICP备12000418号-1 )

GMT+8, 2024-6-8 15:41

Powered by OpenEdv-开源电子网

© 2001-2030 OpenEdv-开源电子网

快速回复 返回顶部 返回列表