本文是本系列第五篇文章，圖文方式介紹視覺化介面設計工具——Qt Designer。

1. 簡介

Qt 提供了一款名叫 Qt Designer 的工具，該工具提供了 Qt 基本的可繪製視窗部件（如 QLabel 、 QPushButton 等）或佈局（如：QVBoxLayout 、 QGridLayout 等），透過滑鼠直接拖曳這些視窗部件，放置在窗體的相關位置，按所見即所得的方式，來進行窗體設計，並可以設計的窗體效果進行快速預覽。

藉助 Qt Designer 工具，能夠高效、快速地以視覺化方式完成窗體 UI 的設計，介面直觀形象，所見所得。

文中會涉及到如下術語，簡介如下：

Widget：部件（也稱元件、控制元件），用於 GUI 的圖形介面元素，如按鈕、標籤等。Form：窗體，本文用於指 GUI 視窗的統稱。

單擊桌面上的 Qt Designer 快捷方式，然後啟動 Qt Designer。在 Qt Designer 窗口出現後，通常會自動彈出一個【新建窗體】的對話方塊視窗，在該視窗中選擇一個窗體模板（如：Main Window），然後點選【建立】按鈕，即可進入 Qt Designer 設計視窗。

3. Qt Designer 簡介3.0 視窗介面概覽

下圖為 Qt Designer 的一個典型設計視窗介面：

Qt Designer 設計視窗介面

整個設計視窗除了窗體標題欄和邊框外，可以劃分為8個區域：

第1個區域：頂部的選單欄第2個區域：頂部選單欄下方的工具欄（也稱選單快捷選項）第3個區域：底部的狀態列第4個區域：左側的視窗部件盒第5個區域：中間的窗體編輯器第6個區域：右側上方的物件檢查器第7個區域：右側中部的屬性編輯器第8個區域：右側下方的區域，該區域實際上包含3個Tab區域（訊號/槽 編輯器、資源瀏覽器、動作編輯器）3.1 選單欄（Menu Bar）

選單欄提供了 Qt Designer 設計視窗的大多數功能入口，共包括7組主選單（如下圖示）。

選單欄

3.1.1【檔案】主選單項

該主選單項下的子選單項如下圖示：

【檔案】主選單項

其中常用子選單項介紹如下：

點選【新建…】子選單項（或按快捷鍵 Ctrl + N）後，彈出【新建窗體】對話方塊。點選【開啟】子選單項（或按快捷鍵 Ctrl + O）後，彈出【開啟窗體】對話方塊，從相關路徑中選擇要開啟的窗體檔案（字尾名為 .ui）點選【儲存】子選單項（或按快捷鍵 Ctrl + S）後，彈出【窗體另存為】對話方塊，選擇儲存路徑，將當前窗體儲存為指定檔名的窗體檔案（字尾名為 .ui）

注1：通常情況，儲存的窗體檔名與窗體的 objectName 保持一致（這樣透過檔名就可以直接知道窗體的名稱）。

注2：窗體檔案（.ui）實際上一個 xml 檔案，它記錄了窗體上各部件的屬性和位置分佈。

擴充套件：【新建窗體】對話方塊中提供有三種類型（5種模板）的窗體供選擇：

【新建窗體】對話方塊

1) Main Window型別的窗體模板：該模板是一個基於 QMainWindow 類的窗體，具有主視窗的特性，頂部通常顯示標題欄和邊框，視窗上有主選單欄、工具欄、狀態列等。

2) Widget 型別的窗體模板：該模板是一個基於 QWidget 類的窗體。QWidget 類是所有介面元件的基類，如 QLabel、QPushButton 等介面元件都是從 QWidget 類繼承而來的。QWidget 類也是 QDialog 和 QMainWindow 的父類，基於 QWidget 類建立的窗體可以作為獨立的視窗執行，也可以嵌入到其他介面元件內顯示。

3) Dialog 型別的窗體模板：該模板是一個基於 QDialog 類的窗體，具有一般對話方塊的特性，如可以模態顯示、具有返回值等。可以設定不同的標題欄外觀，主要用於通知或收集輸入視窗，如顏色對話方塊、字型對話方塊等，具體以下有3種：，

3.1.2【編輯】主選單項

該主選單項下的子選單項如下圖示：

【編輯】主選單項

其中前9個子選單項意思很容易理解，就不作介紹了。

最後4個子選單項表示4種 GUI 視窗部件編輯模式：

【編輯視窗部件】子選單項：對應部件編輯模式，此模式下可以在 Qt Designer 中新增 GUI 視窗部件，以及修改它們的屬性和外觀。【編輯訊號/槽】子選單項：對應訊號和槽編輯模式，此模式下可以在 Qt Designer 中的視窗部件上關聯 Qt 已經定義好的訊號和槽。【編輯夥伴】子選單項：對應夥伴編輯模式，此模式下可以在 Qt Designer 中的視窗部件上建立某個部件和其他視窗部件的夥伴關係。【編輯 Tab 順序】子選單項：對應 Tab 編輯模式，此模式下可以在 Qt Designer 中的視窗部件上設定 Tab 鍵在視窗部件上的焦點順序。3.1.3【窗體】主選單項

該主選單項下的子選單項如下圖示：

【窗體】主選單項

其中：

前9個子選單項，均為佈局相關的，會在後續文章中詳細介紹。點選【預覽於】子選單項，會顯示3個下級子選單項（【windowsvista 風格】、【Windows 風格】、【Fusion 風格】），在預覽時分別對應三種風格的窗體。點選【預覽…】子選單項（或按快捷鍵 Ctrl + R）後，可以對所建立的窗體進行預覽。

預覽設計的窗體

點選【View C++ Code…】子選單項後，可以檢視該窗體對應的 C++ 程式碼。點選【View Python Code…】子選單項後，可以檢視該窗體對應的 Python 程式碼。

【檢視窗體對應的 Python 程式碼】

點選【窗體設定…】子選單項後，彈出【窗體設定】對話方塊視窗。3.1.4【檢視】主選單項

該主選單項下的子選單項如下圖示：

【檢視】主選單項

其中：

勾選【視窗部件盒】子選單項後，在主視窗的停靠區出現【視窗部件盒】。勾選【物件檢查器】子選單項後，在主視窗的停靠區出現【物件檢查器】。勾選【屬性編輯器】子選單項後，在主視窗的停靠區出現【屬性編輯器】】。勾選【資源瀏覽器】子選單項後，在主視窗的停靠區出現【資源瀏覽器】。勾選【動作編輯器】子選單項後，在主視窗的停靠區出現【動作編輯器】。勾選【訊號/槽 編輯器】子選單項後，在主視窗的停靠區出現【訊號/槽 編輯器】。【工具欄】子選單項，可以對啟用哪些快捷按鈕進行設定。3.1.5【設定】主選單項

該主選單項下的子選單項如下圖示：

【設定】主選單項

其中：

點選【首選項…】子選單項後，出現【首選項】對話方塊（如下圖示），可根據需要進行相關設定。

【設定】-【首選項】對話方塊

【其他字型】子選單項3.1.6【視窗】主選單項

該主選單項下的子選單項如下圖示：

【視窗】主選單項

其中：

點選【最小化】子選單項後，將當前窗體設定為最小化。下面列示出 Qt Designer 中已經開啟的窗體（當前正在編輯的窗體名前會有個黑點）3.1.7【幫助】主選單項

該主選單項下的子選單項如下圖示：

【幫助】主選單項

各子選單項功能一目瞭然，就不作進一步介紹了。

下圖是預設配置的工具欄：

預設的工具欄

共分為四組：

第一組（3個）：依次對應主選單項【檔案】下的【新建】、【開啟】、【儲存】子選單項。第二組（2個）：依次對應主選單項【編輯】下的【放到後面】、【放到前面】子選單項。第三組（4個）：依次對應主選單項【編輯】下的【編輯視窗部件】、【編輯訊號/槽】、【編輯夥伴】、【編輯 Tab 順序】子選單項。第四組（8個）：依次對應主選單項【窗體】下的【水平佈局】、【垂直佈局】、【使用拆分器水平佈局】、【使用拆分器垂直佈局】、【網格佈局】、【在窗體佈局中佈局】、【分拆佈局】、【調整大小】子選單項。

因工具欄上的按鈕均對應選單欄下的各子選單項，其功能就請參見選單欄部分了。

3.3 狀態列（Status Bar）

在狀態列中通常會顯示一些跟當前操作相關的資訊。

3.4 視窗部件盒（Widget Box）

視窗部件盒提供了用於設計窗體的一些標準的通用部件和佈局。視窗部件盒中提供了8個分組類別，每個分組類別都包含具有相似用途或相關功能的部件。

透過單擊視窗部件盒中的分組類別標籤旁邊的手柄，可以顯示該分組類別中的所有可用物件（元件或佈局）。當視窗處於【編輯部件模式】時，可以從視窗部件盒中選擇適當的部件拖動到窗體編輯器中，然後將其拖放到所需的位置來將該元件新增設計到窗體。

3.4.1 佈局分組類別（Layouts）

Layouts 分組類別

佈局分組類別中各佈局說明

3.4.2 間隔分組類別（Spacers）

Spacers 分組類別

間隔分組類別中的各部件說明

3.4.3 按鈕分組類別（Buttons）

Buttons 分組類別

3.4.4 專案檢視分組類別（Item Views）

Item Views 分組類別

Item Views 基於模型/檢視（Model/View）結構，檢視（View）與模型資料（Model Data）關聯實現資料的顯示和編輯。

專案檢視分組類別中的各部件說明

3.4.5 專案部件分組類別（Item Widgets ）

Item Widgets 分組類別

Item Widgets 直接將資料儲存在每一個項裡。一個項儲存了文字、文字的格式、自定義資料等。

專案部件分組類別中的各部件說明

3.4.6 容器分組類別（Containers）

Containers 分組類別

容器分組類別中的各部件說明

3.4.7 輸入部件分組類別（Input Widgets）

Input Widgets 分組類別

輸入部件分組類別中的各部件說明

3.4.8 顯示部件分組類別（Display Widgets）

Dispaly Widgets 分組類別

顯示部件分組類別中的各部件說明

3.5 窗體編輯器

窗體編輯器中可以對窗體進行視覺化設計，選擇左側視窗部件盒中的相應元件（或佈局），透過滑鼠拖曳至此區域，放置在相應位置。

窗體編輯器

上面示例圖中分別從左側視窗部件盒中的【Dispaly Widgets】分組類別中選擇了2個 QLabel 部件，從【Input Widgets】分組類別中選擇了2個 QLineEdit 部件，從【Buttons】分組類別中選擇了2個 QPushButton 部件，透過滑鼠拖曳至此區域（主窗體），並進行排列放置。

注1：頂部顯示的“Main Window - untitled*” 表示該窗體尚未命名。

注3：更多資訊會在後續文章中加以介紹。

3.6 物件檢查器（Object Inspector）

物件檢查器中用樹形檢視列示出了窗體上所有部件、以及各部件之間的佈局和包含關係。

樹形檢視有兩列，分別顯示各部件的物件名稱（objectName）和對應的類名稱。

物件檢查器

注：更多資訊會在後續文章中加以介紹。

3.7 屬性編輯器（Property Editor）

屬性編輯器中列出了被選中的窗體或部件的各種屬性和對應的值，可以在屬性編輯器裡修改這些屬性的值。

屬性編輯器的內容分為兩列，其中左側列是屬性的名稱，右側列是該屬性對應的值。

屬性自上而下分為多個組，實際上代表了類的繼承關係。

屬性編輯器

簡單示例介紹：

——上部的 MainWindow : QMainWindow 表示這是一個 QMainWindow 窗體；

——objectName 屬性：表示窗體/部件的物件名稱，窗體中的每一個部件都需要一個唯一的物件名稱，以便在程式碼中被引用。本例中 objectName 屬性的值為“MainWindow”，表示窗體的物件名稱為：MainWindow。該值可以進行修改。

——上圖可以看出 QMainWindow 類的繼承關係為： QObject 類 <– QWidget 類 <- QMainWindow 類。

——其他眾多屬性本文就不一一說明了，會在後續文章中陸續加以介紹。

注：更多資訊會在後續文章中加以介紹。

3.8 訊號與槽編輯器（Signal/Slot Editor）

訊號與槽編輯器中列出了在 Qt Designer 中關聯的訊號和槽，透過雙擊列中的物件或訊號/槽，可以進行物件和訊號/槽的選擇。

訊號/槽 編輯器

注：更多資訊會在後續文章中加以介紹。

3.9 資源瀏覽器（Resource Browser）

資源瀏覽器中列出了程式使用的資原始檔（*.qrc）以及相應的資源。

資源瀏覽器

注：更多資訊會在後續文章中加以介紹。

動作編輯器

【新建動作】對話方塊

注：建立動作後，可以在任何適用的動作處使用它。

要將動作新增到選單欄或工具欄，只需在動作編輯器中在動作上按下滑鼠左鍵，然後將其拖動到首選位置即可。

注：更多資訊會在後續文章中加以介紹。

結束語

本系列介紹如何在 Python 中使用 Qt for Python 進行 GUI 應用程式開發。

本文是《Qt for Python 學習筆記》系列第五篇，對視覺化設計工具 Qt Designer 進行了一個概覽介紹，讓讀者對 Qt Designer 工具有個初步的認識。

接下來會介紹如何藉助 Qt Designer 工具進行視覺化介面設計並完成一個 PySide6 GUI 應用程式開發的過程，敬請期待！