系列文章目錄

第一章 Qt中C++代碼搭配UI文件實(shí)現(xiàn)交互界面

第二章 Qt中多ui使用及簡單布局實(shí)現(xiàn)交互界面

????????前一段時(shí)間，被抽調(diào)到另一個(gè)測試項(xiàng)目，工作內(nèi)容是，基于現(xiàn)有的一份Qt實(shí)現(xiàn)的工具代碼，按照UI/UE設(shè)計(jì)做UI優(yōu)化。做軟件開發(fā)的同行都知道，我們最怕的是半路接手別人的項(xiàng)目代碼，這些代碼實(shí)際運(yùn)行中可能很正常，但通常有一些毛病：沒注釋、命名不規(guī)范、邏輯混亂、沒有設(shè)計(jì)文檔等等。

? ? ? ? 看了這份工具的代碼，我發(fā)現(xiàn)這個(gè)工作看起來不是那么容易。在跟之前負(fù)責(zé)開發(fā)這個(gè)工具的同事交流后，了解到這個(gè)同事進(jìn)入了一個(gè)誤區(qū)，或者說對Qt了解甚少。

? ? ? ? Q:全部使用絕對值算窗口位置，應(yīng)該花了很多時(shí)間調(diào)整的？

? ? ? ? A:是啊，確實(shí)花了不少時(shí)間

? ? ? ? Q:為什么不使用UI設(shè)計(jì)工具來實(shí)現(xiàn)界面呢？

? ? ????A:直接拉UI總感覺不受自己控制，最后調(diào)來調(diào)去的反而浪費(fèi)時(shí)間

????????A:純UI沒辦法實(shí)現(xiàn)繼承，就需要實(shí)現(xiàn)多個(gè)界面

??????????

?????????

這里提到的basewidget就是下面這樣的，除了QWidget還需要繼承一個(gè)? ?JsonPhaseApi類，這個(gè)類實(shí)現(xiàn)了解析json內(nèi)容的一些邏輯。?

? ? ?

一、關(guān)于Qt中的UI文件

????????我們不管使用QtCreator還是QtDesigner實(shí)現(xiàn)一個(gè)UI界面，最終表現(xiàn)形式，都只是一個(gè)后綴為.ui的文本文件，用文本編輯器打開，這個(gè)ui文件就是一個(gè)XML格式的文件。將在QtCreator或者QtDesigner中拖拽實(shí)現(xiàn)的UI界面用XML格式組織起來，等待使用。

? ? ? ? 那么Qt中會(huì)怎么使用這個(gè)ui文件呢，畢竟我們開發(fā)過程中不可能直接去讀這個(gè)ui文件，簡單來說，Qt在構(gòu)建過程中，會(huì)將這個(gè)ui文件翻譯成一個(gè)ui_打頭的c++頭文件，這個(gè)頭文件跟基本的C++頭文件沒什么不一樣，只是其中的代碼是基于Qt的，這些代碼實(shí)現(xiàn)了一個(gè)C++類。

二、創(chuàng)建一個(gè)基本的Qt工程

1.創(chuàng)建工程時(shí)，選擇不生成ui文件

2.工程內(nèi)容

3.構(gòu)建并運(yùn)行這個(gè)工程

這個(gè)工程運(yùn)行起來后，就是一個(gè)很簡單的跟隨系統(tǒng)樣式的窗口，標(biāo)題欄、最小化、最大化、關(guān)閉按鈕都是跟隨系統(tǒng)的。

4.實(shí)現(xiàn)并添加UI文件

????????這里我們可以使用QtCreator或者QtDesigner實(shí)現(xiàn)一個(gè)獨(dú)立的UI，然后將這個(gè)ui文件添加到這個(gè)工程中。這個(gè)UI中僅拖入一個(gè)Push Button類型的按鈕，結(jié)果如下：

? ? ? ? 這之后，我們選擇清空掉build目錄下所有內(nèi)容，然后重新構(gòu)建，這之后，就能在build目錄中看到一個(gè)ui_form.h的文件，這就是上面說到的Qt自動(dòng)翻譯的文件，將form.ui翻譯成ui_form.h，具體如下圖所示：

將這個(gè)文件放到Q他Creator中打開后，跟編輯模式中ui文件比對一下就能發(fā)現(xiàn)，Qt翻譯的真準(zhǔn)確：

三.使用這個(gè)新增的UI

? ? ? ? 接下來就是本篇文章的核心環(huán)節(jié)，核心觀點(diǎn)就一個(gè)，生成的UI可以當(dāng)成一個(gè)普通的類使用。經(jīng)過Qt翻譯生成的ui_form.h，基類是UI_Form，其派生類是用Ui這個(gè)namespace包裹的From類。那么，在C++中使用一個(gè)類的傳統(tǒng)方式是：在代碼中顯式的include對應(yīng)的頭文件，聲明并定義一個(gè)類的實(shí)例，然后使用這個(gè)實(shí)例，使用這個(gè)From同樣如此。

? ? ? ? 為了將新增的UI嵌入到工程中的Widget類中使用，首先在widget.h中聲明From類的對象，考慮到隱藏ui_form.h中的細(xì)節(jié)，選擇前置聲明的方式，具體如下圖所示：

????????接著，在widget.cpp中包含對應(yīng)的頭文件，并實(shí)例化Widget類中的私有成員變量：Form類型對像ui，具體如下圖所示：

?ps：當(dāng)然這里也需要注意在析構(gòu)函數(shù)中回收ui指針指向的這段內(nèi)存，這個(gè)很重要

四.編譯運(yùn)行

最后，就是激動(dòng)人心的編譯運(yùn)行環(huán)節(jié)，運(yùn)行結(jié)果如下圖所示：

總結(jié)

????????使用Qt提供的UI設(shè)計(jì)器，可以簡單的通過鼠標(biāo)拖拽的方式來設(shè)計(jì)交互界面，優(yōu)點(diǎn)有很多，所見即所得、速度快、簡單，如果有更細(xì)的分工：比如邏輯實(shí)現(xiàn)與UI實(shí)現(xiàn)，那么代碼實(shí)現(xiàn)與UI實(shí)現(xiàn)完全可以分開進(jìn)行。負(fù)責(zé)邏輯實(shí)現(xiàn)的工程師，根據(jù)溝通好的內(nèi)容（約定好UI中有哪些控件），yiju UE文檔編寫邏輯代碼、實(shí)現(xiàn)信號(hào)槽等等；負(fù)責(zé)UI實(shí)現(xiàn)的工程師，只需要根據(jù)UI文檔實(shí)現(xiàn)交互界面。

? ? ? ? 當(dāng)然，一個(gè)工具的界面內(nèi)容很多，考慮到代碼開發(fā)與后期維護(hù)，完全可以將一個(gè)完整的界面分割成一個(gè)個(gè)子界面，最后通過簡單的代碼將每一個(gè)子界面在主窗口中完成布局。這就像C++中實(shí)現(xiàn)一個(gè)功能，首先根據(jù)高內(nèi)聚低耦合的原則，將這個(gè)功能拆分成多個(gè)子功能，然后將子功能抽象為一個(gè)個(gè)子類，最后將所有子類聚合為一個(gè)完整的功能。

? ? ? ? 如果你的英文閱讀水平不錯(cuò)的話，可以看看Qt的幫助文檔中Using a Designer UI File in Your Application章節(jié)，在線幫助文檔和QtCreator自帶幫助文檔，可以在QtCreator的幫助中直接搜索Using a Designer UI File in Your Application，如下：

文章預(yù)告

下一篇文章，會(huì)說一說在一個(gè)Widget類中使用多ui以及簡單代碼實(shí)現(xiàn)布局，敬請期待?。。?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-547546.html

到了這里，關(guān)于Qt中C++代碼搭配UI文件實(shí)現(xiàn)交互界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！