一、Qt Designer簡介

????????Qt Designer是PyQt程序UI界面的實現(xiàn)工具，可以幫助我們快速開發(fā) PyQt 程序的速度。它生成的 UI 界面是一個后綴為 .ui 的文件，可以通過 pyiuc 轉換為 .py 文件。

????????Qt Designer工具使用簡單，可以通過拖拽和點擊完成復雜界面設計，并且設計完成的.ui程序可以轉換成.py文件供python程序調(diào)用。本文主要通過用戶登錄需求描述Qt Designer工具開發(fā)界面的使用方法。

二、界面介紹

????????如下圖所示是Qt?designer的一個標準界面。

1. 導航欄：包括文件操作（新建、導入、保存等）、窗體（預覽窗口3中的UI效果）、視圖（顯示or關閉各種模塊窗口2~6）、設置（各種頁面屬性設置）等。其中最為常用且重要的是文件和窗體，選擇窗體→ \rightarrow→預覽（或者快捷鍵Ctrl+R）可以看到UI的實際運行效果。視圖保持默認的全部開啟即可。
2. Widget Box（部件盒）：Widget Box位于Qt Designer界面的左側，它提供了各種可用的窗口部件（widgets）?？梢詮腤idget Box中拖放這些部件到主界面編輯區(qū)域，以構建GUI界面。Widget Box中的部件包括按鈕、標簽、文本框、下拉列表等。
   1. Form Editor（表單編輯器）：Form Editor是Qt Designer界面的主要編輯區(qū)域，位于中央部分。在表單編輯器中，可以拖放部件到界面上，調(diào)整它們的位置和大小，并設置它們的屬性和布局?？梢允褂帽韱尉庉嬈鲃?chuàng)建和修改GUI界面的布局，如添加布局管理器、設置部件的位置和大小等。換句話說就是你設計UI的地方。
3. Object Inspector（對象檢查器）：Object Inspector位于Qt Designer界面的右側，它顯示了當前選中部件的屬性和布局信息?？梢允褂脤ο髾z查器來查看和修改部件的屬性，如文本、字體、大小等。它還允許設置部件的布局屬性，如位置、大小、對齊方式等。
4. Property Editor（屬性編輯器）：Property Editor位于Qt Designer界面的右方中部，默認顯示在對象檢查器下方。它提供了一個表格視圖，顯示了當前選中部件的屬性列表。可以使用屬性編輯器來直接編輯和修改部件的屬性值。通過雙擊屬性值可以進行編輯或選擇合適的值。
5. 窗口6包含3個模塊：

• Resource Browser（資源瀏覽器）：資源瀏覽器是一個用于管理和引用資源文件的功能模塊。資源文件可以包含圖像、字體、樣式表等應用程序所需的各種資源。資源瀏覽器提供了一種方便的方式來添加、編輯和使用這些資源。
• Signal/Slot Editor（信號/槽編輯器）：Signal/Slot Editor位于Qt Designer界面的底部，通常與屬性編輯器一起顯示。它提供了一個圖形界面，用于管理和連接部件之間的信號和槽。通過信號/槽編輯器，可以將部件的信號與其他部件的槽函數(shù)進行連接，以實現(xiàn)交互和事件處理。
• Action Editor（動作編輯器）：Action Editor是Qt Designer中的一個獨立模塊，用于管理和配置菜單欄、工具欄和上下文菜單中的動作（actions）。通過動作編輯器，可以添加、修改和刪除各種動作，并為它們設置相應的屬性和快捷鍵。

三、基本控件介紹

1、Layouts（布局）

????????Widget Box中的Layouts（布局）組件提供了一種方便的方式來管理部件的位置和大小，以及定義它們之間的關系。這些布局部件可以幫助您創(chuàng)建自適應和靈活的GUI界面。以下是Widget Box中常見的布局組件及其功能介紹：

????????QVBoxLayout（垂直布局）：VBox Layout按垂直方向排列其子部件。它們會根據(jù)容器的大小自動調(diào)整子部件的大小和位置?？梢韵虼怪辈季痔砑硬考?#xff0c;并控制它們的對齊方式、間距等屬性。

????????QHBoxLayout（水平布局）：HBox Layout按水平方向排列其子部件。類似于垂直布局，它們會根據(jù)容器的大小自動調(diào)整子部件的大小和位置?？梢韵蛩讲季痔砑硬考?#xff0c;并控制它們的對齊方式、間距等屬性。

????????QGridLayout（網(wǎng)格布局）：Grid Layout將部件排列為網(wǎng)格狀結構，可以在行和列中進行布局?？梢灾付ú考奈恢?#xff0c;并控制它們在網(wǎng)格中的大小和間距。

????????QFormLayout（表單布局）：Form Layout適用于創(chuàng)建表單樣式的界面，其中包含標簽和對應的輸入部件。它將標簽和部件配對，并按照列的方式進行布局?？梢钥刂茦撕灪筒考膶R方式、間距等屬性。

2、 Spacers（間隔器）

????????

????????在Widget Box中，Spacers（間隔器）是一組組件，用于在布局中創(chuàng)建空白空間，以調(diào)整部件之間的距離和位置。它們有助于實現(xiàn)靈活的界面布局。以下是Widget Box中Spacer組件及其功能介紹：

????????QSpacer：QSpacer是一個簡化的間隔器部件，它可以直接添加到布局中。它可以在垂直布局、水平布局或網(wǎng)格布局中創(chuàng)建空白空間?？梢哉{(diào)整QSpacer的大小和屬性，以滿足您的布局需求。包括：Horizontal Spacer & Vertical Spacer。

3、Item Views（項視圖）

????????Widget Box中的Item Views（項視圖）組件提供了用于顯示和編輯結構化數(shù)據(jù)的部件，例如表格、樹狀結構和列表。這些組件提供了豐富的功能和靈活的選項，以滿足各種數(shù)據(jù)展示和交互需求。以下是Widget Box中常見的Item Views組件及其功能介紹：

????????QListWidget（列表視圖）：QListWidget是一個用于顯示和編輯簡單列表數(shù)據(jù)的部件。它以列表形式呈現(xiàn)數(shù)據(jù)，并支持單選和多選模式?？梢蕴砑印h除和編輯列表項，并設置其圖標、文本等屬性。

????????QTreeView（樹視圖）：QTreeView是一個用于顯示和編輯樹狀結構數(shù)據(jù)的部件。它以層次結構形式展示數(shù)據(jù)，并可展開和折疊節(jié)點?？梢酝ㄟ^設置模型和委托來自定義樹視圖的外觀和行為。

????????QTableView（表格視圖）：QTableView是一個用于顯示和編輯二維表格數(shù)據(jù)的部件。它以表格形式呈現(xiàn)數(shù)據(jù)，并提供了各種功能，如排序、編輯、選擇、拖放等。可以通過設置模型和委托來自定義表格的外觀和行為。

????????QColumnView（列視圖）：QColumnView是一個用于顯示和編輯多列數(shù)據(jù)的部件。它以列的形式展示數(shù)據(jù)，并允許用戶在列之間進行導航和選擇?？梢栽O置列視圖的模型和委托來自定義其外觀和行為。

4、Item Widgets（項部件）

? ? ? ? 在Widget Box中，Item Widgets（項部件）是一組用于在Item Views組件中顯示和編輯數(shù)據(jù)的部件。與Item Views類似。

5、Containers（容器）

????????

????????容器部件（container widget）在窗體中提供更高級的對象分組控制。它們可以作為多種用途使用，諸如管理輸入部件（input widgets）、提供分頁和選項卡布局、又或者僅僅作為其它對象的裝飾性容器等等。以下是常見的Containers組件及其功能介紹：

????????Group Box （組框）：組框的主要應用場景就是將復選框和單選按鈕等作為一個集合有機的進行分組。每個組框都有自己的布局，尤其當其包含部件時，布局是必需有的。同日常的布局操作一樣，對組框的布局操作也沒有什么特別的，只需要在其內(nèi)部右鍵操作布局即可。

????????Scroll Area（滾動區(qū)域）：提供了在有限空間內(nèi)顯示大量內(nèi)容的功能。當內(nèi)容超過Scroll Area的可見區(qū)域時，它會自動添加滾動條，以便用戶可以滾動查看內(nèi)容，例如文本、圖像、部件等。

????????Tool Box（工具箱） ：可以理解為，工具箱有很多抽屜，每次只能打開一個，抽屜里可以放很各種各樣的東西，例如QQ的好友分組，每個分組下有不同數(shù)目的聯(lián)系人。點擊不同抽屜時，會觸發(fā)currentChanged信號。

????????Tab Widget（多頁面切換）：可以實現(xiàn)在同一區(qū)域中自由切換不同頁面的內(nèi)容，該控件是一個容器類控件，并提供友好的頁面切換方式。

????????Stacked Widget（層疊窗口/堆棧窗口）：多界面切換?？梢蕴畛湟恍┬】丶?#xff0c;但是同一時間只有一個小控件可以顯示。QStackedWidget控件不能在頁面之間進行切換，它與當前選中的QListWidget控件中的選項進行連接currentRowChanged信號。

????????Frame（框架）：控制一些邊框的樣式，凸起，凹下，陰影等。

????????Widge：組件，主窗體容器。

????????MDI Area：可以同時顯示多個文檔的區(qū)域。

????????Dock Widget（浮動窗口）：它是放置在QMainWindow中的中央窗口小部件周圍的?？看翱谛〔考^(qū)域中的次要窗口。QDockWidget由一個標題欄和內(nèi)容區(qū)域組成。標題欄顯示浮動窗口小部件窗口標題，浮動按鈕和關閉按鈕。

6、 Input Widgets

???????

?????????Widget Box中的Input Widgets（輸入部件）提供了多種用于用戶輸入數(shù)據(jù)的部件。以下是這些組件的詳細功能介紹：

????????Combo Box ：組合框。是一個集按鈕和下拉選項于一體的控件，也稱做下拉列表框。

????????Font Combo Box ：字體組合框。組合框中填充了按字母順序排列的字體系列名稱列表，讓用戶選擇字體。

????????Line Edit ：單行文本框。

????????Text Edit ：多行文本框?？娠@示多行文本內(nèi)容，當文本內(nèi)容超出控件顯示范圍時，可以顯示水平和垂直滾動條。

????????Plain Text Edit ：純文本框。用于編輯和顯示純文本控件。在默認情況下，一個換行符表示一個段落，文檔可以一個或者多個段落組成，且段落中的每個字符都可以有其自己的屬性，例如有自己的字體和顏色。

????????Spin Box ：整型數(shù)值計數(shù)器。允許用戶選擇一個整數(shù)值通過單擊向上向下或者按鍵盤上的上下鍵來增加減少當前顯示的值，當然用戶也可以輸入值。

????????Double Spin Box ：浮點數(shù)值計數(shù)器。默認精度是兩位小數(shù)，可以通過setDecimals（）來改變。????????

????????Time Edit ：時間編輯。

????????Date Edit ：日期編輯。

????????Date/Time Edit ：時間/日期編輯。

????????Dial ：圓表盤控件。例如汽車儀表盤上的速度計，就是一個圓表盤。

????????Horizontal Scroll Bar ：水平滾動條。

????????Vertical Scroll Bar ：垂直滾動條。

????????Key Sequence Edit ：用于輸入快捷鍵序列的控件。

7、Display Widgets????????

????????Widget Box中的Display Widgets（顯示部件）用于在應用程序中顯示和展示數(shù)據(jù)或信息。以下是這些組件的詳細功能介紹：

????????Label : 標簽。QLabel用于在應用程序中顯示文本或圖像。它可以顯示靜態(tài)文本、富文本或圖像，并且支持自動換行、對齊和格式化等功能。

????????Text Browser : 文本瀏覽框。QTextBrowser用于在應用程序中顯示多行文本或富文本。它提供了一個只讀的多行文本顯示區(qū)域，支持顯示和瀏覽大段文本、富文本或超鏈接等。

????????Graphics View : 用于顯示QGraphicsScene場景的部件，可用來顯示圖片。QGraphicsView框架主要包含三個主要的類QGraphicsScene（場景）、QGraphicsView（視圖）、QGraphicsItem（圖元）。

????????Calendar Widget : 日歷小部件。是一個設置日歷的控件，它提供了一個基于月份的視圖，允許用戶通過鼠標和鍵盤選擇日期，默認是選中今天，可以對日期的范圍進行限制。

????????LCD Number : LCD屏部件，顯示LCD樣式的數(shù)字。

????????Progress Bar : 進度條，其實就是滑塊，可以設置其最小值、最大值、當前值，也可以設置其方向，如橫向或者豎向。

????????Horizontal Line : 水平線。

????????Vertical Line : 垂直線。

????????OpenGL Widget : 是一個OpenGL（Open Graphics Library，開放圖形庫）圖形渲染的部件，可以在PyQt和Qt的應用中顯示圖形（包括2D和3D圖形），在Designer中，該部件沒有任何獨有屬性，都是繼承的QWidget的屬性。