使用Qt Designer建立介面

標籤：

在部落格 “在Qt中使用C++代碼建立介面” （地址：http://blog.csdn.net/rl529014/article/details/51345619）中，我講了如何通過純C++代碼來建立Qt圖形介面，

這是傳統的GUI程式開發方式，只使用C++代碼，C++既負責設計介面，也負責處理商務邏輯。

介面是使用者能夠直接看到的，稱為“前端”；商務邏輯的處理使用者看不到，在背後默默進行，稱為“後台”。

• 傳統的GUI程式開發不區分前端和後台，統一使用C++代碼管理，源檔案中既有建立和設定控制項的代碼，又有處理商務邏輯的代碼，非常雜亂。
  
  
• 使用C++代碼直接建立控制項，不管是從文法上講還是從代碼量上講，看起來都比較“麻煩”。學過web開發的朋友應該會有體會，網頁就是將前端和後台無縫整合的經典例子。
  
  
• 在網頁中，我們能看到的各種文字、顏色、圖片、布局、按鈕、菜單、列表等介面元素都是使用HTML+CSS（專門用來設計介面的聲明式語言）建立的，而後台邏輯才需要JavaScript、Python、PHP、Java等程式設計語言來處理。
  
  
• 現代GUI程式的設計，或許也借鑒了Web開發的思想，可以使用 XML 來設計介面，使用C++來處理後台邏輯，在 Qt 中可以輕而易舉做到前端和後台分離，從而讓代碼邏輯更加清晰，開發更加高效。

使用Qt Designer

Qt Designer 是與 Qt 配套的介面設計工具，使用它可以輕而易舉拖拽出簡單的介面，下面我們就來學習一下。

在部落格   “在Qt中使用C++代碼建立介面”  中講到了，建立 Qt Widgets Application 項目的第四步是填寫類資訊，

如所示：

“建立介面”選項預設是被勾選的。

項目建立完成後可以看到，勾選了“建立介面”選項，IDE 會多產生一個mainwindow.ui檔案，如所示：

雙擊 mainwindow.ui，就可以進入設計模式，啟動 Qt Designer，如所示：

再切換回編輯模式，就可以看到 mainwindow.ui 的原始碼，如所示：

.ui檔案是 Qt Designer 的介面設計檔案，由 XML 代碼構成。Qt Creator 不允許在編輯模式下修改 .ui 檔案，只能切換到設計模式由 Qt Designer 自動產生。


XML是一種標記語言（也稱聲明式語言），由一個一個地節點群組成，每個節點還可以包含多個屬性，HTML 就是 XML 的一種具體化。
XML 是程式員必備的技能，也很簡單，開發中會經常用到，可以不熟練，但要有所瞭解。
在編輯區看到的介面，僅包含了程式的客戶區，沒有包含標題列，所以不會看到最大化、最小化、關閉等常見按鈕。

新建立的程式，預設包含了功能表列、工具列和狀態列。如所示：

大家可以從左側的控制項箱中拖拽幾個控制項到編輯區的視窗中，親自測試一下效果。如所示：（左側控制項箱中的控制項都可以用滑鼠拖到編輯地區，）

是我拖拽出的一個記事本介面。運行結果為：

使用Qt Designer建立介面