這裡寫自定義目錄标題
- QT4.7的UI界面設計功能
-
- 效果展示
- 檔案機制
- UI功能詳述
- 信号與槽機制（非常重要）
- 添加新檔案
- 頂部菜單欄設定
-
- 菜單界面與點選下拉欄選項後界面切換
- 彈窗顯示
-
- 主界面與彈窗界面之間的互換
- 關于界面/視窗背景
-
- 直接設定背景
- 通過TextBrowser間接設定背景
- 極可能出現的兩種無厘頭錯誤
- 小結
QT4.7的UI界面設計功能
大一下的暑假就被學校安排去大連東軟實習，專業課也隻學了C、C++和資料結構，去了之後被要求用一個之前沒用過的開發軟體QT做一個銀行排隊系統，授課時間一天，開發時間三天，最後一天用來答辯。明确任務之後就進行了分工，其中我負責UI界面設計，經過三天高強度的檢索、實踐、嘗試、改錯、完善、優化，制作的界面總算是可以看了。
在此強調一點，如果你想要學習 QT4.7下的圖形使用者界面的設計，本文非常合适，因為我用了連續的三天三夜從一無所知到基本完成目标（明人不說暗話：主要是任務擺在那裡，要在全體同學面前展示的，不肝不行~），期間經曆的整個過程都會在本文中展現出來。
效果展示
檔案機制
這一部分介紹QT UI下的檔案機制，即如何建立合适的檔案，話不多說，直接上圖檔過程。
打開QT——> 左上角File——>下拉欄裡第一個new file or project——>如下圖——>起個名字，標明路徑——>一路next，最後finish——>建立成功//準備工作完成
解釋一下各檔案：.pro檔案是總的工程檔案，當用到一些技術時在裡面寫入所用到的技術，如：QT += sql（資料庫） QT += network（網絡），其實我個人感覺和擴入頭檔案很相似，隻有将頭檔案給擴入了才能用好相應的功能。.ui 檔案就是我們用來拖動圖形元素進行界面繪制的檔案了，後面文章中會詳細講述。.h檔案和C++裡面的頭檔案機制一模一樣，因為QT在這裡也是面向對象的。sources檔案夾裡就是各種.cpp檔案了，其中有個main.cpp檔案，在界面設計的部分main函數幾乎不做改變，因為其他的界面是從主界面往外延伸的。
UI功能詳述
.ui檔案就是我們進行圖形使用者界面顯示時主要設計檔案，打開.ui檔案後可以看到上面的視窗。左側是各式各樣的控件，中間是一張畫布，右側是所拖入控件的屬性。這種拖拽式的程式設計方法是非常友善的，除了QT之外，VS，MATLAB等也有相似的圖形界面設計方法。雖然往畫布上拖拽控件是一項很容易get到的技能，但是要設計出一些規整的界面還是要了解到一些技巧的。
下面先介紹一下控件們
用的最多的，也是最基本的幾項控件如下：
Push Button：按鈕：常見的像确認/傳回按鈕等，點選一下後會産生相應的反應，比如：彈出對話框、關閉目前界面等。
LineEdit：行編輯：簡單的說這一個控件可以實作在使用者輸入界面輸入資訊，将其轉交到程式手中，比如：使用者輸入賬号和密碼時就在這裡面輸。
Lable:标簽：寫在裡面的往往是一些靜态的文字提示，就比如：“賬号”、“密碼”這兩個輸入項提示。當所要提示的資訊比較多時，再用一個小标簽就顯得有些不合适了，這時就用：TextBrowser（文本浏覽器）—— 一個大的文本編輯框 。
Layout：層次設定：說白了就是自動對齊，格式化布局設定。首先是vertical layout 是橫向層次分布，可以實作若幹數量的控件橫向系統自排列，同理horizontal layout 是縱向層次自排列。但是用它們來實作格式化布局有些許麻煩（就是需要再把控件拖到層次框的作用範圍裡面），其實還有一種簡單的做法，在畫布的正上方有一行圖示，其中就有層次格式化布局的四個圖示，在圈定層次布局時就還可以先標明所排器件，直接單擊畫布正上方的相應圖示即可。
Spacer：空間間隔組：這個像彈簧一樣的控件是用來調節空間間隔的，通過自定義層次設定中各器件的占比（下方藍筆标出來的即是，中間用逗号隔開），以達到上下編輯框幾近等長排列的效果。（調整後效果如下所示）
一個小技巧，若是很難標明到層次布局的底闆上時，可以通過點選右側控件（即下面紅筆标出來的 ）實作。
所有控件介紹如下：
按鈕組（Buttons）
Push Button：按鈕。
Tool Button：工具按鈕。
Radio Button：單選按鈕。
Check Box：複選框。
Command Link Button：指令連結按鈕。
Button Box：按鈕盒
輸入部件組（Input Widgets）
Combo Box：組合框。
FontCombo Box：字型組合框。
LineEdit：行編輯。
TextEdit：文本編輯。
Plain Text Edit：純文字編輯。
SpinBox：數字顯示框（自旋盒）。
Double Spin Box：雙自旋盒。
TimeEdit：時間編輯。
DateEdit：日期編輯。
Date/Time Edit：日期/時間編輯。
Dial：撥号。
Horizontal Scroll Bar：橫向滾動條。
Vertical Scroll Bar：垂直滾動條。
Horizontal Slider：橫向滑塊。
Vertical Slider：垂直滑塊。
Keysequence Edit：按鍵序列編輯。
顯示控件組（Display Widgets）
Label：标簽。
TextBrowser：文本浏覽器。
Graphics View：圖形視圖。
Calendar：月曆。
LCDNumber：液晶數字。
Progress Bar：進度條。
Horizontal Line：水準線。
Vertical Line：垂直線。
OpenGL Widget：開放式圖形庫工具。
QQuickWidget：嵌入QML工具。
QWebView：Web視圖。
空間間隔組（Spacers）
Horizontal Spacer：水準間隔。
Vertical Spacer：垂直間隔。
容器組（Containers）
Group Box：組框。
Scroll Area：滾動區域。
ToolBox：工具箱。
TabWidget：标簽小部件。
Stacked Widget：堆疊部件。
Frame：幀。
Widget：小部件。
MdiArea：MDI區域。
DockWidget：停靠窗體部件。
QAxWidget：封裝Flash的ActiveX控件。
項目視圖組（Item Views）
List View：清單視圖。
Tree View：樹視圖。
Table View：表視圖。
Column View：列視圖。
項目控件組（Item Widgets）
List Widget：清單控件。
Tree Widget：樹形控件。
Table Widget：表控件。
信号與槽機制（非常重要）
随着學習的不斷深入，發覺資訊檢索的能力越發重要，知識無窮無盡，而且是不斷更新的，即便你能把學過的知識悉數熟練掌握，技術也是會不斷更疊的。之前看到過一篇文章，說一個業界大佬即便是40多歲了，也能3天掌握一門新語言，然後用它進行開發，說了這麼多，目的隻有一個，就是介紹下面推薦的視訊連結非常重要，對于QT的學習，非常有幫助。
在這裡推薦一個B站上的視訊，完全适合新手，這個視訊講的很好，強力推薦！！~ 以視訊的形式進行講述的話也更容易被接受。好的資源應該分享，諾，這是網址： QT5入門精講. 一定要好好看一下！
信号與槽機制可以說是QT最具特色最靓的一個設計方式了，正是這種信号與槽的機制，實作了固有套路的設定與特定的現實要求完美的無縫切合。核心代碼就一段：connect（信号的發出者，發出的信号，信号的接收者，做出的反應）
connect(ui->exitpushButton,SIGNAL(clicked()),this,SLOT(close()));
每個控件都有相對應的信号接收方式，最簡單的就像按鈕的“點選”。但是光控件就有上面羅列出來的那麼一大堆，每一個又對應着好多信号，那麼就會有好多的組合。這就要用到help了，通過help就可以查出各控件的對應信号了。
添加新檔案
在介紹頂部菜單欄的設定以及彈窗效果之前，先說一下如何在一個檔案中添加新的檔案，其實做法有很多，我感覺最好用的就是下面圖檔所展示的。
1.右鍵單擊目前任務檔案，在下拉欄裡找到**Add new…**這項，然後單擊。
2.添加視窗時都是點選QT Designer Form Class這項，然後OK。
3.我們在這裡用到的僅是templates下面的五項，前三個Dialog（視窗）都是制作彈窗界面時用的，標明後的效果分别是UI界面自動帶上底部的兩個按鈕、自動帶上右側的兩個按鈕、不帶按鈕；第四個main Window就是有菜單欄效果的視窗。
4/5兩步見下。
頂部菜單欄設定
4.點選main Window，可以自己起檔案名，然後一路next，最後Finish。
這是添加後的樣子，注意右上角的type there，這就是我們制作菜單欄管理的起點。
在進行後續步驟之前，應該至少把推薦視訊的信号與槽機制那三節視訊課看完之後才能繼續往下進行。
當在第一個菜單格裡輸入完第一項後便可以繼續往後擴充了。
通過點選下拉欄裡的加号可以繼續擴充。（很是簡單吧~）
菜單界面與點選下拉欄選項後界面切換
這一個與下面的主界面與彈窗界面之間的互換非常相似，都很重要，所推薦的視訊上介紹的很詳細了已經，一定要把那個視訊看好才能更好更快的了解了。
彈窗顯示
5.點選Dialog with button bottom/Dialog with button right/Dialog without button中的一個（大多數情況選without button就行，因為按鈕我們可以自己按需要添加）同樣起檔案名，然後一路next，最後Finish。
添加後就這樣，很是普通~
然後同樣的可以往裡面拖控件啥的，沒有問題。
主界面與彈窗界面之間的互換
關于界面/視窗背景
首先的一個準備操作得是将標明的背景圖檔添加到目前工作檔案夾裡，添加方法如下：
第一步同添加新檔案一樣。
第二步選擇QT resource file，然後起名，一路next。
第三步往這個檔案裡加圖檔（比較關鍵，反正當時我是找了好長時間資料，又嘗試了很多次才加好）
1，點選add prefixs（此時add files也點不動）
2，此時add files就可以點選了
3，標明圖檔，打開
4，點選copy，然後save，添加背景照片完成。
直接設定背景
1.右擊畫布，選擇change stylesheet
2.點選add resource後面的小三角，下拉欄裡的background-image
3.點選那個重新整理的按鈕，然後OK，但是此時發現并沒有添進圖檔，問題不大，點選一下運作按鈕即可。
通過TextBrowser間接設定背景
思路就是整一個TextBrowser控件，然後把它拉到和視窗一樣大，把相應的操作轉移到對此控件的change stylesheet上就行，同樣是右擊找到，然後設定，不再贅述。
極可能出現的兩種無厘頭錯誤
一、.h檔案中聲明了某個函數頭，但是.cpp檔案中沒有給出具體定義
ld returned 1 exit status 這個标志性的錯誤提醒就去.h檔案中找一下是否有些聲明沒有在.cpp檔案裡面實作。
二、.pro檔案中少删了東西
比如說你想要删掉一些檔案，比如說就像要把彈窗檔案删掉。
直接右擊然後remove file是不行的，應該同時點選.pro檔案，然後在此檔案裡删掉所對應的一行代碼即可。
比如應該還進行這樣的操作：
其實我犯這個錯誤是在删除resource資源檔案時發生的，發現有一些圖檔用不到，就想要删除掉這些沒有用的資源檔案，但是卻發現編譯不過去了，原因就是沒有在.pro裡删掉那行所對應的代碼。（其實原因想想也是這回事，在檔案夾裡面删掉了那個檔案，然後.pro檔案在加載的時候發現檢索不到了，肯定就會編譯不過去了。）
小結
本次實習最重要的收獲就是化繁為簡，各司其職，分而治之；再就是充分利用好網際網路來檢索資訊，而且是能高效利用的資訊；最後就是肝吧，來了任務，肝就完事了。