零基础C++开发上位机--基于QT5.15的串口助手（三）

本系列教程本着实践的目的，争取每一节课都带大家做一个小项目，让大家多实践多试验，这样才能知道自己学会与否。

接下来我们这节课，主要学习一下QT的串口编程。做一款自己的串口助手，那么这里默认大家都是具备串口通信的背景知识的。当然你也可以不知道这个背景知识，跟着试试学一下，其实就是一个设备传输数据，通过某种格式传给电脑显示出来。而去处理这些数据显示C++本身自带各种库方便我们去调用。所以说你只需要知道串口通信需要具备哪些参数即可，这些参数是固定死的，必须遵循的。

这里左上角是通信成功必须设置的参数，通信的两个设备必须设置成一样才可以成功发送或者接收数据。我们按照上面的例子做一个自己的串口软件。

一、创建工程

大家熟悉的流程。借着创建一个新的Ui我们再利用这个新项目再来走一遍。 

我们还是先新建一个widget窗口的应用。点击选择即可。

重新创建一个文件夹，命名为Serial Assistant，项目名称也一样，一定要养成喜欢，必须全部都是纯英文或数字，有困难的就用汉语拼音和数字。总之一定不要用中文。

接下来还是我们要创建一个widget窗口，直接选即可。

然后其他一顿无脑点击下一步，完成进入工程开始编程。

二、Ui设计

既然是面向对象的编程，我们跳出以前的框架。直接先把Ui界面设计好，再来详细开发内部的功能互动。让Ui界面来指导我们怎么一步一步做。一开始的Ui界面我们先仿照别人的做，然后在以后的调试使用的过程中再自己慢慢优化。

1.摆放输入框和按钮标签

各位同学按照我的箭头摆放对应的控件。稍后为大家解释各个都是什么功能。

Combo Box----可以在箭头处选择框内的内容

Line Edit----输入信息对话框

Plain Text Edit----接收信息显示框

PushButton----上节课用到过的按钮

TextLabel----上节课用到过的显示文本

2.控件命名

虽然简陋，但是作为新手来说我已经很满足了。后续的我们学会了基本功能之后再做优化和美化即可。

接下来先编译一下程序，养成好的习惯，切勿上来编写一个大程序一步到位，结果编译时候全是错误无从入手。

程序运行无错误，可直接运行界面，接下来我们使用QT的布局工具，对界面进行排布。

3.界面布局

 a.水平布局

对Combo Box和其右侧的文本进行水平布局。记住，是每一个都单独的水平布局。

做完单独的水平布局后，就是框选刚才所有完成水平布局的控件进行垂直布局。

b.垂直布局

点击上面菜单栏的垂直布局。

垂直布局之后，将其拖拽到左下角，我们开始布局其他的控件。

C.间隔柱

当我们单独对按钮等控件进行水平布局和垂直布局时候，系统会默认让他们挨的很近，并保持等间距。但是有时候我们希望它们能分散开等间距排布，这时候我们就需要使用到间隔柱这个排布工具。

当我们使用水平布局时候需要使用到水平间隔柱，如果是垂直布局需要使用垂直间隔柱。

然后我们统一进行水平布局就是上图的效果了。再我们把发送数据区和发送框单独水平布局。

接下来对1和2两个水平布局完成的控件整体进行垂直布局，就更加整齐了。

在菜单栏直接点击栅格布局，对整体界面进行排布。将标签文本进行居中处理后运行程序试试看效果。

我们可以任意拖拽窗口，大家可以看到完成布局的窗口的界面是可以跟随窗口一起任意放大缩小的。

三、控件设置

以下内容与串口的通信规则规范相关，建议掌握一些基础知识，这样看起来更通透一些。不看也可以，就是死记硬背。

1.Combo Box设置

双击其中的控件，在弹出的对话框点击绿色的加号，再添加自己要的内容。

波特率设置

数据位设置

校验位设置

停止位设置

不知道设置什么内容的，直接打开例子软件就可以了，这里我们看看自己的软件效果。

有一点问题，就是目前显示的数值并不是我们常用的数值。

2.默认数值设置

 

选择对应的控件，再右下角的属性里面找到”currentindex“，修改对应的数值，可以选择不同currentText显示。

好了，我们的默认数据也设置完成了。

3.控件对象命名

这里的控件命名，与之前的第二节命名不一样，我们这里的控件对象命名，是真正用到程序中的命名，有助于其他人读懂我们的程序，也方便我们自己的维护升级。之前的控件命名仅仅是显示名称。

右侧的对象名称，大家可以看到，现在我们的控件按钮等等统统都叫什么名字。全是按钮1，按钮2，按钮3，这些在程序里面使用的时候我们根本无法维护。所以，我们将他们形象的改成跟显示名称类似的名称，方便开发程序。

对上面每一个需要开发的控件对象进行命名，确保一看就指导其功能作用。不用回来看Ui界面即可。

好了，到这里Ui界面基本完成了。后续只需要个别优化即可了。

四、程序开发

1.工程文件serial_assistant.pro

QT里面自带了好多库，我们直接调用即可，只需要引用其类即可。在第一行加入serialport。

QT       += core gui  serialport

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++17

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += \
    main.cpp \
    widget.cpp

HEADERS += \
    widget.h

FORMS += \
    widget.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

2.项目文件widget.cpp

心细的同学，是否发现了我们之前程序运行后，在端口那块的控件并没有任何显示。这一块不是我们预制的内容，它是当我们连接不同设备时候，系统可以默认搜索到可用的端口并显示。也就是说，搜索可用端口是能否通信的大前提。所以我们第一步先来查询可以用的端口。

#include "widget.h"
#include "ui_widget.h"
#include <QSerialPortInfo>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QStringList serialNamePort;

    foreach(const QSerialPortInfo &info, QSerialPortInfo::availablePorts())
    {
        serialNamePort<<info.portName();
    }
    ui->Serialport_comboBox->addItems(serialNamePort);
}

Widget::~Widget()
{
    delete ui;
}

加入头文件后，增加搜索可以端口的语句即可完成对串口的搜索。这些都是自带的库供我们调用的结果。

好了，我们可以看到端口处自动搜索到了可用的com2。之后，我们就可以开始真正的通信变成了。今天先讲到这里。大家课后一定要多练习多实践。