1. 程式人生 > >使用Qt Designer建立介面

使用Qt Designer建立介面

在部落格 (地址: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 Widgets Application 專案的第四步是填寫類資訊,

如下圖所示:


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

專案建立完成後可以看到,勾選了“建立介面”選項,IDE 會多生成一個mainwindow.ui檔案,如下圖所示:

雙擊 mainwindow.ui,就可以進入設計模式,啟動 Qt Designer,如下圖所示:


再切換回編輯模式,就可以看到 mainwindow.ui 的原始碼,如下圖所示:


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


XML是一種標記語言(也稱宣告式語言),由一個一個地節點組成,每個節點還可以包含多個屬性,HTML 就是 XML 的一種具體化。
XML 是程式設計師必備的技能,也很簡單,開發中會經常用到,可以不熟練,但要有所瞭解。


在編輯區看到的介面,僅包含了程式的客戶區,沒有包含標題欄,所以不會看到最大化、最小化、關閉等常見按鈕。

新建立的程式,預設包含了選單欄、工具欄和狀態列。如下圖所示:


大家可以從左側的控制元件箱中拖拽幾個控制元件到編輯區的視窗中,親自測試一下效果。如下圖所示:(左側控制元件箱中的控制元件都可以用滑鼠拖到編輯區域,)


下圖是我拖拽出的一個記事本介面。執行結果為: