大家好，我是老吴。
我又成功写了一篇小文章，每当我没动力写文章的时候，我就会把写文章的门槛降低，这其实是很好的一个技巧，把一个大目标切成很多小目标，是对付拖延症的一个好方法。
正巧最近看了一些讨论敏捷开发的文章，或者是不是可以考虑一下怎么敏捷学习？
某个项目的长时间开发会消磨开发人员的耐心，长时间学习某样东西同样也会打击人的信心。
再说了，你怎么知道现在学习的东西将来是否会在工作上用得上。
所以，我的结论是：学到的知识尽量马上用。能用一点是一点，不够用了再回头补！
回到正题，学习 Qt 的最佳途径是阅读官方的手册和示例。
今天要分享的是 Qt 官方示例：terminal。
一个简易的串口终端工具：
点击查看大图
它演示了如何创建一个终端，并使用 QSerialPort 进行串口通讯。
源码文件：
`terminal/`
`├── console.cpp`
`├── console.h`
`├── images/`
`├── main.cpp`
`├── mainwindow.cpp`
`├── mainwindow.h`
`├── mainwindow.ui`
`├── settingsdialog.cpp`
`├── settingsdialog.h`
`├── settingsdialog.ui`
`├── terminal.pro`
`└── terminal.qrc`
接下来，跟我一起来实现这个小工具吧。
正文目录：
`1. 新建 Qt Widgets Application`
`2. 设计主界面`
`3. 实现主界面的功能`
`4. 设计设置界面`
`5. 实现设置界面的功能`
`6. 相关参考`
1. 新建 Qt Widgets Application
在 Qt Creator 里 点击 File > New File or Project > Applications > Qt Widgets Application > Choose：
点击查看大图
以 QMainWindow 作为基类，子类名为 MainWindow：
新建完成后会得到下列文件：
`terminal/`
`├── main.cpp`
`├── mainwindow.cpp`
`├── mainwindow.h`
`├── mainwindow.ui`
`├── terminal.pro`
`└── terminal.qrc`
运行效果：
点击查看大图
此时只有跟 QMainWindow 一样的界面，还没有任何串口终端相关的功能。
2. 设计主界面
主界面分为 4 部分：
点击查看大图
1、菜单栏，用 QMenuBar 实现，用于提供串口终端的核心操作功能;
2、工具栏，用 QToolBar 实现，用于提供快捷操作;
3、中间区域留空，待会在 C++ 中通过继承 QPlainTextEdit 来实现，用于输入和输出串口信息;
4、状态栏，用 QstatusBar 实现，用于显示当前的连接状态。
在 Qt Designer 里执行下列操作：
1、菜单栏里添加 Calls、Tools 菜单项：
在 Calls 里添加子菜单项 Connect、Disconnect，分别对应连接和断开串口的功能。
在 Tools 里添加子菜单项 Configure、Clear，分别对应打开设置窗口、清空终端信息的功能。
2、工具栏里添加 Connect、Disconnect、Configure、Clear 按钮;
3、添加 Setting 对话框：
使用 Dialog without Buttions 模板，新建名为 "SettingsDialog" 的对话框。
运行效果：
点击查看大图
此时，菜单栏和工具栏里的菜单项并没有任何实际功能。
3. 实现 Setting 功能
由于连接串口前需要先设置参数，所以我们需要先实现 Setting 界面里的功能。
设计界面：
点击查看大图
此时，还没有实际的功能。
支持选择串口设备：
`// 文件：settingsdialog.cpp`
`void SettingsDialog::fillPortsInfo()`
`{`
`...`
`// 拿到系统当前所有可用的串口设备列表`
`const auto infos = QSerialPortInfo::availablePorts();`
`// 初始化组合框`
`for (const QSerialPortInfo &info : infos) {`
`QStringList list;`
`description = info.description();`
`manufacturer = info.manufacturer();`
`serialNumber = info.serialNumber();`
`list << info.portName();`
`...`
`m_ui->serialPortInfoListBox->addItem(list.first(), list);`
`}`
`}`
在 Qt 里，可以通过 QSerialPortInfo 来获取系统当前可用的串口设备列表，我们拿到串口信息后，就用它来初始化 Serial Port 组合框。
当选择不同的串口设备时，要切换设备的描述信息：
`connect(m_ui->serialPortInfoListBox,`
`QOverload<int>::of(&QComboBox::currentIndexChanged), this,&SettingsDialog::showPortInfo);`
运行效果：
点击查看大图
支持设置串口参数：
`// 文件：settingsdialog.cpp`
`void SettingsDialog::fillPortsParameters()`
`{`
`// 添加可选的波特率、数据位数等串口参数`
`m_ui->baudRateBox->addItem(QStringLiteral("9600"), QSerialPort::Baud9600);`
`m_ui->baudRateBox->addItem(QStringLiteral("19200"), QSerialPort::Baud19200);`
`m_ui->baudRateBox->addItem(QStringLiteral("38400"), QSerialPort::Baud38400);`
`m_ui->baudRateBox->addItem(QStringLiteral("115200"), QSerialPort::Baud115200);`
`...`
`}`
在 Qt 里，串口相关的功能由 qtserialport 模块负责实现，只要就是 QSerialPort 和 QSerialPortInfo 这两个类。
运行效果：
点击查看大图
支持保存设置：
`// 文件：settingsdialog.cpp`
`void SettingsDialog::apply()`
`{`
`updateSettings();`
`hide();`
`}`
`// 将串口参数保存在变量 m_currentSettings 中`
`void SettingsDialog::updateSettings()`
`{`
`m_currentSettings.name = m_ui->serialPortInfoListBox->currentText();`
`m_currentSettings.baudRate = static_cast<QSerialPort::BaudRate>(m_ui->baudRateBox->itemData(m_ui->baudRateBox->currentIndex()).toInt());`
`...`
`}`
当点击 Apply 按钮时，就会调用到 apply()，进而将界面上的串口参数保存在 struct Settings m_currentSettings 中。
运行效果：
点击查看大图
4. 实现串口 Connect 功能
`// 文件：mainwindow.cpp`
`void MainWindow::openSerialPort()`
`{`
`const SettingsDialog::Settings p = m_settings->settings();`
`// 要打开哪个串口设备？`
`m_serial->setPortName(p.name);`
`...`
`// 仍然是那个熟悉的 open()`
`if (m_serial->open(QIODevice::ReadWrite)) {`
`m_console->setEnabled(true);`
`m_ui->actionConnect->setEnabled(false);`
`m_ui->actionDisconnect->setEnabled(true);`
`m_ui->actionConfigure->setEnabled(false);`
`...`
`}`
`}`
当点击 Connect 按钮时，就会调用到 openSerialPort()，进而将执行到 QSerialPort 的 open()。
m_console 是一个 QPlainTextEdit 类型的对象，它负责显示串口。
运行效果：
点击查看大图
此时已经能打开串口设备了，但是还无法显示串口数据。
5. 实现串口读写功能
支持从串口读数据：
`// 文件：mainwindow.cpp`
`void MainWindow::readData()`
`{`
`// 从串口硬件中读数据`
`const QByteArray data = m_serial->readAll();`
`// 显示在文本框中`
`m_console->putData(data);`
`}`
打开串口后，当串口有数据时，就调用 MainWindow::readData() 将数据读出来并显示到界面上。putData() 会调用
QPlainTextEdit::insertPlainText() 将数据显示在文本框里。
支持向串口写数据：
`// 文件：console.cpp`
`void Console::keyPressEvent(QKeyEvent *e)`
`{`
`switch (e->key()) {`
`// 不处理某些按键`
`case Qt::Key_Backspace:`
`...`
`break;`
`default:`
`// 发送接收到用户输入的信号`
`emit getData(e->text().toLocal8Bit());`
`}`
`}`
当用户通过键盘输入时，m_console 会捕获该事件并发出信号，主界面接收到该信号后，会执行真正的写串口操作：
`// 文件：mainwindow.cpp`
`MainWindow::MainWindow(QWidget *parent)`
`: ...`
`{`
`...`
`connect(m_console, &Console::getData, this, &MainWindow::writeData);`
`}`
`void MainWindow::writeData(const QByteArray &data)`
`{`
`// 熟悉的 write()`
`m_serial->write(data);`
`}`
运行效果：
点击查看大图
到此，这个 Qt 的官方示例子 terminal 的核心功能就实现完毕啦。
感兴趣的小伙伴们请自行阅读 Qt example 里的完整代码吧。
相关参考
《Qt 官方文档》
《C++ GUI Qt4 编程 (第二版)》
《Qt5 编程入门 (第二版)》
《Qt Creator 快速入门》
—— The End ——
推荐阅读：
想进交流群？
后台回复【加群】，我拉你进群。
