今日头条/西瓜视频/抖音短视频 同名：正点原子

感谢各位的关注和支持，你们的关注和支持是正点原子无限前进的动力。

第七章《Qt控件 1》

由于本章内容较多，所以第七章《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内置了六种按钮部件如下：

（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.1QPushButton

7.1.1.1控件简介

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

7.1.1.2用法示例

例04_qpushbutton窗口换肤（难度：简单），通过单击不同的按钮，改变窗口的颜色。

新建一个项目名称为为04_qpushbutton，在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。如果还不会新建一个项目，建议回到3.6小节查看如何新建一个项目。完成如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QPushButton类 */

6   #include <QPushButton>

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类。

第18和20行，声明两个QPushButton的对象。

第24和26行，声明两个QPushButton对象的槽函数。

在源文件“mainwindow.cpp”具体代码如下。

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行，设置程序窗口的显示位置和显示大小，如果不设置，运行的程序窗口在Ubuntu里有可能在某个位置出现，而在Windows一般出现在中间。

第10和11行，实际化QPushButton对象。在初始化的时候可以传入QString类型串，作为按钮的显示文本。

第14行，设置按钮的大小和位置，按钮的大小不能设置过小，否则按钮上的文本可能显示不全。

第18行和19行，连接两个QPushButton对象的信号与槽。

第27行至38行，两个QPushButton的槽函数实现，设置主窗体的样式表，其中设置background-color的rgba参数即可改变窗体的背景颜色。关于什么是样式表，如何设置样式表，以后会以一个小节专门讲解。

在源文件“main.cpp”具体代码如下，由新建项目时生成，无改动。

mainwindow.cpp源代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

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  }

7.1.1.3运行效果

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

点击窗口皮肤2按钮，主窗体显示效果如下。

7.1.2QToolButton

7.1.2.1控件简介

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

7.1.2.2用法示例

例05_qtoolbutton自定义工具栏（难度：简单）。

新建一个项目名称为05_qtoolbutton。在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QToolButton类 */

6   #include <QToolButton>

7   /* 引入QToolBar类 */

8   #include <QToolBar>

9 

10  class MainWindow : public QMainWindow

11  {

12      Q_OBJECT

13

14  public:

15      MainWindow(QWidget *parent = nullptr);

16      ~MainWindow();

17

18  private:

19      /* 声明一个QToolButton对象 */

20      QToolButton *toolButton;

21      /* 声明一个QToolBar对象 */

22      QToolBar *toolBar;

23  };

24  #endif // MAINWINDOW_H

第20和22行，声明QToolButton对象和QtoolBar对象。

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码

1   #include "mainwindow.h"

2   #include <QApplication>

3   #include <QStyle>

4 

5   MainWindow::MainWindow(QWidget *parent)

6       : QMainWindow(parent)

7   {

8       /* 设置主窗体的位置和大小 */

9       this->setGeometry(0, 0, 800, 480);

10

11      /* 实例化QToolBar对象 */

12      toolBar = new QToolBar(this);

13      /* 设置toolBar的位置和大小 */

14      toolBar->setGeometry(0, 0, 800, 100);

15

16      /* 实例化QStyle类对象，用于设置风格，调用系统类自带的图标 */

17      QStyle *style = QApplication::style();

18

19      /* 使用Qt自带的标准图标，可以在帮助文档里搜索QStyle::StandardPixmap */

20      QIcon icon = style->standardIcon(QStyle::SP_TitleBarContextHelpButton);

21

22      /* 实例化QToolButton对象 */

23      toolButton = new QToolButton();

24

25      /* 设置图标 */

26      toolButton->setIcon(icon);

27      /* 设置要显示的文本 */

28      toolButton->setText("帮助");

29      /* 调用setToolButtonStyle()方法，设置toolButoon的样式，设置为文本置于图标下方 */

30      toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

31

32      /* 最后将toolButton添加到ToolBar里 */

33      toolBar->addWidget(toolButton);

34  }

35

36  MainWindow::~MainWindow()

37  {

38  }

这段代码的流程是，初始化toolBar（工具条/工具栏）对象，然后初始化toolButton（工具按钮）对象，设置工具按钮的样式。最后将toolButton（工具按钮）添加到toolBar（工具条/工具栏）上。这样就完成了自定义工具栏的设计。

在源文件“main.cpp”具体代码如下，由新建项目时生成，无改动。

mainwindow.cpp源代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

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  }

7.1.2.3运行效果

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

7.1.3QRadioButton

7.1.3.1控件简介

QRadioButton部件提供了一个带有文本标签的单选框（单选按钮）。

QRadioButton是一个可以切换选中（checked）或未选中（unchecked）状态的选项按钮。单选框通常呈现给用户一个“多选一”的选择。也就是说，在一组单选框中，一次只能选中一个单选框。默认在同一个父对象下，初始化后点击它们是互斥状态。

7.1.3.2用法示例

例06_radiobutton仿手机开关效果（难度：中等）。本例将实现手机开关效果，需要使用到Qt样式表，加载qss样式表文件，与7.1.1小节类似，只是把样式表写到qss文件里了。这里我们慢慢接触Qt的样式表了，正因为有样式表我们才能写一些比较有实际应用的例子和比较炫的例子。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。

添加资源文件，按如下步骤。右键项目，选择Add New…。

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

填上资源文件的名称（可随意写一个，编者简写为res），默认添加项目路径下。后面的步骤默认即可，点击完成。

新建完成了资源文件后，默认会进入res.qrc文件编辑模式（如果关闭了，可以右键这个文件点击选择“Open in Editor”），点击Add Prefix添加前缀，添加前缀的目的是方便分类管理文件，比如我们现在第?处添加了前缀/。“/”一定需要写，否则会找不到路径，这有点像Linux的根节点一样。

添加了前缀后，我们添加资源图片，放在/images前缀的下面。这里我们准备了两张图片，在本项目路径images文件夹（images文件夹先手动创建）下。如下图步骤，添加完成需要按“Ctrl + S”保存res.qrc才会看到左边的结果。添加完成如下图。

添加qss文件。QSS文件是使用Qt程序相关联的样式表文件。它由GUI元素的外观和感觉，包括布局，颜色，鼠标的行为，大小和字体。它的风格，一个可以合并到一个UI（用户界面）。与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果。

新建一个style.qss文件，如下图，默认添加到项目的路径下，后面步骤默认即可，直至完成。

qss文件添加后如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QRadioButton */

6   #include <QRadioButton>

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

在第18和19行声明两个QRadioButton对象。

在源文件“mainwindow.cpp”具体代码如下。

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  }

第23行和24行，设置QRadioButton对象的初始化状态，让它们互斥。

在源文件“main.cpp”具体代码如下。我们需要在main.cpp里加载qss文件。

main.cpp编程后的代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

4   /* 引入QFile */

5   #include <QFile>

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”具体代码如下，与HTML里的css语法相似。如果不会写qss的内容，可以参考Qt帮助文档的内容，在里面搜索“qt style”。在里面找相关的例子参考，这里我们只是初步了解下这个qt style。

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  }

在第10行和第13行，设置QRadioButton的indicator的背景图片。这样当它们点击切换时就会看到类似开关切换的效果了。

7.1.3.3运行效果

编译程序运行的效果如下。点击关闭开关一，开关二即打开；点击开关二，开关一即打开。因为它们默认是互斥的效果。在某种情况下我们需要使用这种效果，比如我们在网上看视频时经常需要切换线路，线路可能有几种，但是只有一种是激活状态的，我们就可以应用到这个方向上。

在这个例子里我们学习到如何添加资源，步骤也详细，后面的例程都可参考这个例程来添加资源文件，不再详细讲解添加过程。我们已经初步了解了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小节。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QCheckBox  */

6   #include <QCheckBox>

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”具体代码如下。

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”具体代码如下。我们需要在main.cpp里加载qss文件。

main.cpp编程后的代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

4   /* 引入QFile */

5   #include <QFile>

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”具体代码如下。

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

17  }

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

7.1.4.3运行效果

编译程序运行的效果如下，多次点击checkBox，即可看到QCheckBox的三种状态切换。

选中状态时。

半选状态。

未选中状态。

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

7.1.5 QCommandLinkButton

7.1.5.1控件简介

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

7.1.5.2用法示例

例08_qcommandlinkbutton链接窗口（难度：简单）。使用一个QCommandLinkButton，点击打开系统的窗口。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QComboBox */

6   #include <QComboBox>

7 

8   class MainWindow : public QMainWindow

9   {

10      Q_OBJECT

11

12  public:

13      MainWindow(QWidget *parent = nullptr);

14      ~MainWindow();

15

16  private:

17      /* 声明一个QComboBox对象 */

18      QComboBox *comboBox;

19

20  private slots:

21      /* 声明QComboBox对象的槽函数 */

22       void comboBoxIndexChanged(int);

23

24  };

25  #endif // MAINWINDOW_H

在第21行，声明一个QComboBox对象。

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码

1   #include "mainwindow.h"

2   /* 引入桌面服务，用来打开系统文件夹对话框 */

3   #include <QDesktopServices>

4   /* 引入QUrl */

5   #include <QUrl>

6 

7   MainWindow::MainWindow(QWidget *parent)

8       : QMainWindow(parent)

9   {

10      /* 主窗体设置位置和显示的大小 */

11      this->setGeometry(0, 0, 800, 480);

12      

13      /* 实例化对象 */

14      commandLinkButton = new QCommandLinkButton(

15                  "打开/home目录", "点击此将调用系统的窗口打开/home目录",this);

16      

17      /* 设置QCommandLinkButton位置和显示大小 */

18      commandLinkButton->setGeometry(300, 200, 250, 60);

19      

20      /* 信号槽连接 */

21      connect(commandLinkButton, SIGNAL(clicked()), this,

22              SLOT(commandLinkButtonClicked()));

23  }

24

25  MainWindow::~MainWindow()

26  {

27  }

28

29  void MainWindow::commandLinkButtonClicked()

30  {

31      /* 调用系统服务打开/home目录 */

32      QDesktopServices::openUrl(QUrl("file:////home/") );

33  }

第14行，实例化时原型是QCommandLinkButton::QCommandLinkButton(const QString &text, const QString &description, QWidget *parent = nullptr)。

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

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  }

7.1.5.3运行效果

程序编译运行的结果如下。

点击中间的打开/home目录按钮，结果如下。系统弹出一个窗口，直接打开到/home目录。

点击打开/home目录后，系统将弹出/home目录路径窗口。

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::Discard

QDialogButtonBox::Apply

QDialogButtonBox::Reset

QDialogButtonBox::RestoreDefaults

QDialogButtonBox::Help

QDialogButtonBox::SaveAll);

7.1.6.2用法示例

例09_qdialogbuttonbox， 自定义QDialogButtonBox里的按钮（难度：简单）。使用一个QDialogButtonBox，在QDialogButtonBox添加Qt提供的按钮，或者自定义按钮。

在新建例程中不要勾选“Generate form”，默认继承QMainWindow类即可。项目新建完成如下图。

在头文件“mainwindow.h”具体代码如下。

mainwindow.h编程后的代码

1   #ifndef MAINWINDOW_H

2   #define MAINWINDOW_H

3 

4   #include <QMainWindow>

5   /* 引入QDialogButtonBox */

6   #include <QDialogButtonBox>

7   /* 引入QPuhsButton */

8   #include <QPushButton>

9 

10  class MainWindow : public QMainWindow

11  {

12      Q_OBJECT

13

14  public:

15      MainWindow(QWidget *parent = nullptr);

16      ~MainWindow();

17

18  private:

19      /* 声明一个QDialogButtonBox对象 */

20      QDialogButtonBox *dialogButtonBox;

21

22      /* 声明一个QDialogButtonBox对象 */

23      QPushButton *pushButton;

24

25  private slots:

26      /* 声明信号槽，带QAbstractButton *参数，用于判断点击了哪个按钮 */

27      void dialogButtonBoxClicked(QAbstractButton *);

28

29  };

30  #endif // MAINWINDOW_H

第18行，声明一个QDialogButtonBox对象。

在源文件“mainwindow.cpp”具体代码如下。

mainwindow.cpp编程后的代码

1   #include "mainwindow.h"

2   /* 引入QDebug */

3   #include <QDebug>

4 

5   MainWindow::MainWindow(QWidget *parent)

6       : QMainWindow(parent)

7   {

8       /* 主窗体设置位置和显示的大小 */

9       this->setGeometry(0, 0, 800, 480);

10

11      /* 实例化并设置按钮的盒子的大小和位置 */

12      dialogButtonBox = new  QDialogButtonBox(this);

13      dialogButtonBox->setGeometry(300, 200, 200, 30);

14

15      /*使用Qt的Cancel按钮*/

16      dialogButtonBox->addButton(QDialogButtonBox::Cancel);

17

18      /*将英文"Cancel"按钮设置为中文"取消" */

19      dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消");

20

21      /* 设定位置与大小 */

22      pushButton = new QPushButton(tr("自定义"));

23

24      /* 将pushButton添加到dialogButtonBox，并设定ButtonRole为ActionRole */

25      dialogButtonBox->addButton(pushButton, QDialogButtonBox::ActionRole);

26

27      /* 信号槽连接，带参数QAbstractButton *，用于判断用户点击哪个按键 */

28      connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),

29              this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));

30  }

31

32  MainWindow::~MainWindow()

33  {

34  }

35

36  void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)

37  {

38      /* 判断点击的对象是否为QDialogButtonBox::Cancel */

39      if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {

40          /* 打印“单击了取消键” */

41          qDebug() <<"单击了取消键"<<endl;

42          /* 判断点击的对象是否为pushButton */

43      }else if(button == pushButton) {

44          /* 打印“单击了自定义键” */

45          qDebug() <<"单击了自定义键"<<endl;

46      }

47  }

第16行，实例化时原型是void QDialogButtonBox::addButton(QAbstractButton *button, QDialogButtonBox::ButtonRole role)。

第41和45行，我们第一次用qDebug()。Qt一般调试都是用qDebug()来打印的。这与C++的cout是功能基本一样。只是Qt自定义为qDebug()而已。

在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。

main.cpp编程后的代码

1   #include "mainwindow.h"

2 

3   #include <QApplication>

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  }

7.1.6.3运行效果

程序编译运行的结果如下。点击自定义按钮和取消按钮，在应用程序输出窗口可以看到对应的点击事件。

7.2输入窗口部件

Qt Designer窗口部件提供的面板中，提供了16种输入部件如下

（1） Comb Box:组合框

（2） Font Comb Box:字体组合框

（3） Line Edit:单行编辑框

（4） Text Edit:文本编辑框

（5） Plain Text Edit:纯文本编辑框

（6） Spin Box:数字旋转框

（7） Double Spin Box:双精度数字旋转框

（8） Time Edit:时间编辑框

（9） Date Edit:日期编辑框

（10） Date/Time Edit:日期时间编辑框

（11） Dial:数字拨盘框

（12） Horizontal Scroll Bar:水平滚动条

（13） Vertical Scroll Bar:垂直滚动条

（14） Horizontal Slider:水平滑动条

（15） Vertical Slider:垂直滑动条

（16） Key sequence Edit:按键序列编辑框

这十六种按钮部件作用简介如下:

QComboBox继承QWidget类，被QFontComboBox类继承。通常用于用户显示选项列表的方法，这种方法占用最少的屏幕空间。

QFontComboBox继承QComboBox。QFontComboBox小部件是一个允许用户选择字体系列的组合框。组合框中填充了按字母顺序排列的字体家族名称列表。FontComboBox常用于工具栏，与ComboBox一起用于控制字体大小，并与两个ToolButtons一起用于粗体和斜体。

QLineEdit继承QWidget。QLineEdit小部件是一个单行文本编辑器。行编辑允许用户使用一组有用的编辑函数输入和编辑一行纯文本，包括撤消和重做、剪切和粘贴以及拖放。通过更改行编辑的echoMode()，它还可以用作“只写”字段，用于输入如密码等。

QTextEdit继承QAbstractScrollArea，被QTextBrowser继承。QTextEdit是一个高级所见即所得查看器/编辑器，支持使用html样式的标记进行 rich text 格式化。它经过优化以处理大型文档并快速响应用户输入。QTextEdit用于段落和字符。段落是格式化的字符串，它被字包装以适应小部件的宽度。在阅读纯文本时，默认情况下，一个换行表示一个段落。一份文件由零个或多个段落组成。段落中的文字与段落的对齐方式一致。段落之间用硬换行符隔开。段落中的每个字符都有自己的属性，例如字体和颜色。QTextEdit可以显示图像，列表和表格。如果文本太大而无法在文本编辑的视图中查看，视图中则会出现滚动条。

QPlainTextEdit是一个支持纯文本的高级查看器/编辑器。它被优化为处理大型文档和快速响应用户输入。

QSpinBox继承QAbstractSpinBox。用于处理整数和离散值（例如：月份名称）而QDoubleSpinBox则用于处理浮点值。他们之间的区别就是处理数据的类型不同，其他功能都基本相同。QSpinBox允许用户通过单击上/下按钮或按下键盘上的上/下按钮来选择一个值，以增加/减少当前显示的值。用户还可以手动输入值。

QDoubleSpinBox继承QAbstractSpinBox。QDoubleSpinBox则用于处理浮点值。QDoubleSpinBox允许用户通过单击“向上”和“向下”按钮或按下键盘上的“向上”或“向下”按钮来选择当前显示的值。用户还可以手动输入值。

QTimeEdit继承QDateTimeEdit。QTimeEdit用于编辑时间，而QDateEdit用于编辑日期。

QDateEdit继承QDateTimeEdit。QDateEdit用于编辑日期，而QTimeEdit用于编辑时间。

QDateTimeEdit类提供了一个用于编辑日期和时间的小部件。QDateTimeEdit允许用户使用键盘或箭头键编辑日期，以增加或减少日期和时间值。箭头键可用于在QDateTimeEdit框中从一个区域移动到另一个区域。

QDial类提供了一个圆形范围控制(如速度计或电位器)。QDial用于当用户需要在可编程定义的范围内控制一个值，并且该范围要么是环绕的(例如，从0到359度测量的角度)，要么对话框布局需要一个正方形小部件。由于QDial从QAbstractSlider继承，因此拨号的行为与滑块类似。 当wrapping（）为false（默认设置）时，滑块和刻度盘之间没有真正的区别。 它们共享相同的信号，插槽和成员功能。 您使用哪一个取决于您的用户期望和应用程序类型。

QScrollBar继承QAbstractSlider。QScrollBar小部件提供垂直或水平滚动条，允许用户访问比用于显示文档的小部件大的文档部分。它提供了用户在文档中的当前位置和可见文档数量的可视化指示。滚动条通常配有其他控件，可以实现更精确的导航。

QSlider继承QAbstractSlider。QSlider类提供垂直或水平滑动条小部件，滑动条是用于控制有界值的典型小部件。它允许用户沿着水平或垂直凹槽移动滑块手柄，并将手柄的位置转换为合法范围内的整数值。

QKeySequenceEdit继承QWidget。这个小部件允许用户选择QKeySequence, QKeySequence通常用作快捷方式。当小部件接收到焦点并在用户释放最后一个键后一秒结束时，将启动记录，通常用作记录快捷键。

本章未完待续......