目錄

一、QT簡介

二、開發(fā)環(huán)境

三、編碼風(fēng)格

四、設(shè)計(jì)框架

五、總結(jié)

---

一、QT簡介

? ? ? ? QT是一款以C++為基礎(chǔ)的開發(fā)工具，已經(jīng)包含了很多常用的庫，除了基本的GUI以外，還有網(wǎng)絡(luò)、數(shù)據(jù)庫、多媒體、進(jìn)程通信、串口、藍(lán)牙等常用庫，開發(fā)起來非常方便。后來QT又引入了QML，使得在制作界面方面更便捷了，類似js的語言，上手容易，短短幾行代碼就可以設(shè)計(jì)出靈活且美觀的界面，開發(fā)成本極低。

? ? ? ? 選擇QT作為用戶端的開發(fā)工具主要有以下優(yōu)點(diǎn)：

1、學(xué)習(xí)成本較低，相比于再學(xué)習(xí)Java和安卓開發(fā)，確實(shí)是低的；而且既然會(huì)C語言了，由于QT各種庫已經(jīng)封裝得非常好了，你只要學(xué)會(huì)如何調(diào)用就行了，上手很快，不要被C++嚇到。

2、具備前后端開發(fā)的框架，相信QT引入QML也是為了可以區(qū)分前后端開發(fā)，相比于傳統(tǒng)的QtWidgets純C++開發(fā)，結(jié)構(gòu)框架上會(huì)好很多，而且QtWidgets也不適合手機(jī)端的開發(fā)。

3、通用性強(qiáng)，就這個(gè)項(xiàng)目的QT程序，可以在Windows、MacOS、安卓、IOS、嵌入式linux(樹莓派、香橙派)等平臺(tái)編譯運(yùn)行，作為個(gè)人的學(xué)習(xí)開發(fā)工具，效率很高。

4、使用廣泛，QT在消費(fèi)級(jí)產(chǎn)品比較少應(yīng)用，但是在工業(yè)領(lǐng)域卻是很廣泛的存在，比如汽車的很多儀表盤的界面都是用QT做的，會(huì)QT對以后找工作是有比較大的幫助的。

? ? ? ? 總的來講，QT綜合功能強(qiáng)，很適合個(gè)人開發(fā)一些小項(xiàng)目、上位機(jī)等，可以讓你的學(xué)習(xí)精力放在項(xiàng)目本身，見效快。

二、開發(fā)環(huán)境

? ? ? ? QT的開發(fā)方式是比較豐富的，很多人一開始都是從拖拽界面開始的，但是我不太建議這樣，表面上效率很高，但是稍微有點(diǎn)邏輯、動(dòng)態(tài)變化的元素在里面就很不好處理，比較適合做些固定的小界面。要我說，還是要學(xué)會(huì)用代碼的方式去控制界面。

? ? ? ? 正常QT安裝完后就可以直接用自帶的MinGW編譯套件進(jìn)行開發(fā)，可以隨機(jī)打開一個(gè)自帶的Demo進(jìn)行測試。對于我們項(xiàng)目本身，框架結(jié)構(gòu)上還是要有利于維護(hù)的，所以各類文件存放的位置最好統(tǒng)一下，如下圖所示，整個(gè)工程結(jié)構(gòu)主要分為項(xiàng)目文件xxx.pro、頭文件、cpp文件和資源文件四大部分，在資源管理器內(nèi)的文件夾也做相應(yīng)的分類，這樣整個(gè)項(xiàng)目維護(hù)起來比較方便。

三、編碼風(fēng)格

? ? ? ? 每個(gè)開發(fā)語言或者開發(fā)工具都有自己的編碼風(fēng)格，比如之前說的RT-Thread用的是Unix風(fēng)格，小寫字母+下劃線。相對來講，Qt的風(fēng)格比較豐富，大部分是下圖這種形式的，前面是小寫的動(dòng)詞，后面使用駝峰法把屬性隔開，比較少用下劃線；如果沒有動(dòng)詞的話，前面也是小寫開頭的。大家打開QT的Demo或者源文件什么的，在默認(rèn)參數(shù)下，整體感覺還是很協(xié)調(diào)優(yōu)雅的，說明他們在編輯器排版、顏色、編碼等內(nèi)容都是做過功課的，那我們也基本上入鄉(xiāng)隨俗，沿用Qt的編碼風(fēng)格，當(dāng)然了，也不一定非得生搬硬套，整體上差不多就行。

? ? ? ? 我個(gè)人的定義一般是這樣，如下圖所示，類的成員變量一般都會(huì)以m_開頭，信號(hào)定義分為兩種，一種是C++內(nèi)部的，用sig開頭，一種是C++發(fā)到QML的，用siq開頭；對于槽函數(shù)，統(tǒng)一都是slot開頭，這樣在寫代碼的時(shí)候很容易就通過補(bǔ)全提示體現(xiàn)篩選出來了。同樣的，在這里我也大量使用了u8、u16和u32，對于嵌入式而言，這個(gè)比較嚴(yán)謹(jǐn)和適用，還有就是個(gè)人習(xí)慣，所以也就沿用了。

? ? ? ? 剛才所提到的信號(hào)和槽是QT的一個(gè)特點(diǎn)，它可以很方便地實(shí)現(xiàn)不同任務(wù)之間的數(shù)據(jù)交互，以前有寫過linux的代碼，是用的管道通信，后來使用QT的信號(hào)槽后感覺方便多了。

四、設(shè)計(jì)框架

? ? ? ? 既然是模仿小米的空氣凈化器，那首先就要看下米家APP關(guān)于凈化器的界面設(shè)計(jì)了。

? ? ? ? 首先界面分為關(guān)機(jī)和開機(jī)兩個(gè)狀態(tài)，上面的是關(guān)機(jī)，數(shù)據(jù)顯示的內(nèi)容和位置其實(shí)是沒變化的，底面背景變了而已；我們只是模仿而已，像自動(dòng)、睡眠這些個(gè)模式就不要了，能調(diào)速就行了，頁面搞太長了也不利于初學(xué)，那其實(shí)就剩下開關(guān)和調(diào)速欄了；這里面其實(shí)還有個(gè)比較麻煩的是開機(jī)后中心圓圈(圖片中橘黃色部分)是漸變色，并且還有氣泡隨機(jī)冒出向中心運(yùn)動(dòng)，這個(gè)要花點(diǎn)腦筋想想怎么實(shí)現(xiàn)，不需要美工的。

? ? ? ? 經(jīng)過整體分析，大概可以做如下分解，前后端先分開，后端主要是數(shù)據(jù)處理的問題，沒有過多的邏輯；前端幾個(gè)界面上面也說明過了，就是一個(gè)動(dòng)態(tài)界面比較麻煩點(diǎn)，還有個(gè)狀態(tài)切換也要說明下，就是根據(jù)不同的PM2.5數(shù)值換算成不同的等級(jí)，這里分為優(yōu)、良、差三級(jí)，對應(yīng)的顏色是綠、黃、紅，這個(gè)在第一篇的演示視頻里應(yīng)該都看到了，這里再大概貼個(gè)界面，頂部改成了在線狀態(tài)(小綠燈)和ID號(hào)，便于跟自己的內(nèi)容結(jié)合。

五、總結(jié)

? ? ? ? 那么，手機(jī)端APP的整體設(shè)計(jì)也就這樣了，不復(fù)雜，這里都沒有用美工進(jìn)行UI設(shè)計(jì)的，幾個(gè)QML文件就能搞定了，核心還是背后要有自己的設(shè)計(jì)思路，我出這個(gè)教程的目的除了方便大家入門以外，還有個(gè)目的就是讓大家一開始就有項(xiàng)目思維，不要停留在跑個(gè)demo的層面。

? ? ? ? 另外，如果暫時(shí)Qt for Android的環(huán)境配置有問題，那就先放放也無妨，直接在PC端體驗(yàn)就好了，效果差不多的，有時(shí)間再慢慢折騰。

??本項(xiàng)目的交流QQ群:701889554

???寫于2024-4-2