點擊上方「嵌入式大雜燴」，選擇「置頂公眾號」第一時間查看嵌入式筆記！

一、前言

大家好，我是ZhengN，本次來教大家編寫一個基于QT的簡單的上位機。

學(xué)習(xí)一個新的東西我們都從最基礎(chǔ)地實例開始，比如學(xué)習(xí)C語言我們會從編寫一個hello程序開始、學(xué)習(xí)嵌入式我們從點燈開始。

同樣的，我們也從編寫一個簡單的基于QT的上位機來體會體會上位機開發(fā)及認(rèn)識認(rèn)識QT。

我們本次實現(xiàn)的上位機的功能很簡單：上位機通過串口來控制開發(fā)板上的一個LED的亮滅。界面如：

演示視頻：

二、QT環(huán)境搭建

在開始編寫上位機之前我們先來一起搭建一下QT開發(fā)環(huán)境（不然就不是手把手了，哈哈）。往期推文?QT | 詳解Qt的幾種開發(fā)方式?中有介紹到QT的兩種開發(fā)環(huán)境：

• 使用VS QT
• 使用Qt Creator

這里我們選擇直接使用QT_Creator的方式。

Qt Creator是一個用于Qt開發(fā)的輕量級跨平臺集成開發(fā)環(huán)境。

Qt Creator可帶來兩大關(guān)鍵益處：

• 提供首個專為支持跨平臺開發(fā)而設(shè)計的集成開發(fā)環(huán)境 (IDE)，并確保首次接觸Qt框架的開發(fā)人員能迅速上手和操作。
• 即使不開發(fā)Qt應(yīng)用程序，Qt Creator也是一個簡單易用且功能強大的IDE。

下面我們來一起安裝Qt Creator。

1、注冊qt賬號

我們需要先注冊一個QT賬號，后面安裝Qt Creator的時候會用到。注冊賬號的地址為：

https://www.qt.io/zh-cn/

2、下載QT_Creator并安裝

我們在Windows上進行開發(fā)，安裝Windows版本的Qt Creator。下載地址：

https://download.qt.io/new_archive/qt/5.11/5.11.3/

下載得到qt-opensource-windows-x86-5.11.3.exe。然后雙擊安裝，第二步需要輸入賬號密碼，把我們上面注冊好的賬號密碼填入即可。

接下來還需要選擇安裝組件，根據(jù)自己需要進行選擇安裝，我安裝的組件如：

安裝完成之后我們桌面上并沒有Qt Creator的快捷方式，需要自己創(chuàng)建。找到Qt Creator的安裝路徑，然后把Qt Creator發(fā)送到桌面快捷方式即可。如：

3、驗證QT_Creator是否安裝成功

我們創(chuàng)建一個簡單的C 工程來驗證一下Qt Creator是否安裝成功。

Qt Creator搭建好之后我們接下來開始編寫我們的上位機。

三、編寫一個簡單的上位機

編寫這個簡單的上位機我們需要經(jīng)過一下幾個步驟：

• 上位機界面設(shè)計。
• 上位機邏輯代碼編寫。
• 添加上位機圖標(biāo)。
• 上位機程序的打包。
• 上位機測試驗證。

1、新建一個serial_led工程

這里需要注意的一點是：工程名及工程路徑不要有中文字符。

另外，QT中有三種基類，這里我們選擇QWidget類。QT的三個基類如：

• QMainWindow類：提供一個帶有菜單條，工具條和一個狀態(tài)條的主應(yīng)用程序窗口。
• QWidget類：所有用戶界面對象的基類，窗口部件是用戶界面的一個基本單元，它從窗口系統(tǒng)接收鼠標(biāo)，鍵盤和其他消息，并在屏幕上繪制自己。
• QDialog類：對話框窗口的基類，對話框窗口主要用于短期任務(wù)和用戶進行短期通訊的頂級窗口，QDialog可以是模態(tài)對話框或者是非模態(tài)對話框。

我們創(chuàng)建的工程如：

其中，項目文件.pro文件是用來告訴qmake關(guān)于為這個應(yīng)用程序創(chuàng)建makefile所需要的細(xì)節(jié)。例如，一個源文件和頭文件的列表、任何應(yīng)用程序特定配置。例如，一個必需鏈接的額外庫或者一個額外的包含路徑、都應(yīng)該放到項目文件中。

2、上位機界面設(shè)計

Qt 一個可視化的界面設(shè)計工具：Qt 設(shè)計器（Qt Designer）。我們雙擊.ui文件就可以進入Qt Designer，在Qt Designer中我們可以通過拖動控件的方式來設(shè)計我們的界面，整個界面如：

我們從左側(cè)的控件區(qū)把我們需要的控件拖動到界面編輯區(qū)中，我們這個簡單地上位機用到的控件如：

這里需要注意的是波特率這個下拉框需要雙擊設(shè)置一些備選配置，如：

大家可以在左邊地控件區(qū)找到這三種控件拖動到界面編輯器進行修改、布局即可。

其中，布局可通過如下組件調(diào)整：

這幾個組件的功能如：

具體地用法大家可以自己去實操一下。

另外，我們需要給我們使用的控件重新命名，在右側(cè)的對象管理區(qū)進行操作。命名為有意義的名字，因為后面編寫代碼會用到。有意義的名字利于編寫易懂的代碼。比如我們修改的名字如：

最后，控件的屬性可根據(jù)需要在屬性區(qū)進行調(diào)整。

3、上位機邏輯代碼編寫

（1）添加串口庫、包含串口相關(guān)頭文件

在serial_led.pro文件添加串口庫：

QT? =?core?gui?serialport


在widget.h文件包含串口頭文件：

#include?
#include?


• QSerialPort 類提供了操作串口的各種接口。

• QSerialPortInfo 是一個輔助類，可以提供計算機中可用串口的各種信息。

（2）添加QSerialPort成員

在widget.h的Widget類中添加一個QSerialPort成員：

（3）創(chuàng)建串口對象、搜索所有可用串口

在Widget構(gòu)造函數(shù)中創(chuàng)建一個串口對象并搜索所有可用串口：

Widget::Widget(QWidget?*parent)?:
????QWidget(parent),
????ui(new?Ui::Widget)
{
????QStringList?serialNamePort;

????ui->setupUi(this);
????this->setWindowTitle("serial_led");

????/*?創(chuàng)建一個串口對象?*/
????serialPort?=?new?QSerialPort(this);

????/*?搜索所有可用串口?*/
????foreach?(const?QSerialPortInfo?