PyQt5 Qt Designer 新手教程（二）—— 使用控制元件搭建簡易對話方塊窗體

阿新 • • 發佈：2021-01-28

PyQt5 Qt Designer 新手教程（二）—— 使用控制元件搭建簡易對話方塊窗體

教程博文

一、前言

這一部分的教程，將教大家如何用部分控制元件搭建一個簡易的窗體，並使用 layout 佈局方式佈局視窗部件，讓視窗儘可能的好看一些。
（PS. 本章的演示例子來自於《Python Qt GUI 快速程式設計 —— PyQt 程式設計指南》）

二、常用快捷鍵介紹

用過設計軟體的人，肯定知道快捷鍵的重要性，它能加快設計人員或者開發人員的速度，很有用。

CTRL+S: 快速儲存（前提：另存為）
CTRL+A: 全選（選擇全部控制元件）
CTRL+C: 複製（可以複製控制元件）
CTRL+V: 貼上（可以貼上控制元件）

Ctrl+Z：撤銷（撤回上幾步）
上下左右方向鍵鍵：移動一大步（可能有 10 px）
CTRL+滑鼠點選：選中一些東西（連續選中，多選）
CTRL + 上下左右方向鍵：移動 1 px（強迫症的福音）
CTRL+R：預覽（預覽目前設計的視窗）

三、預覽需設計的視窗

預覽需要設計的視窗（目前這些控制元件已經擺放到位，並且用佈局限制好了）：
CTRL+R 預覽一下：

四、對話方塊窗體設計理念

這一部分，博主認為也很重要，對設計一個視窗有幫助，這些部分是書上的，搬運過來。

對於步驟 1 與步驟 2 來說，工作總是從 “後” 往 “前” 的，也就是，總會是先從容器（群組框、Tab 視窗部件、框架等）開始，然後再到它們所包含的常規狂口部件，即放到它們上面的東西。

拖動一個視窗部件並將其放到窗體上大致正確的位置；無須仔細對它進行調整，通常情況下，只有容器視窗部件才進行尺寸大小的調整。（補充：後續可以用佈局，或細微調整）
如果有必要，可以設定視窗部件的屬性；如果打算在程式碼中引用這個視窗部件，那麼至少要給它指定一個名字。（補充：實際程式碼我們也要給一個標籤取名字，同樣如此）
重複步驟1和步驟2，直至所需的全部視窗部件都放到了窗體上。
如果還有大的間隙，可以放進來一個水平或者豎直分隔符(spacer，看起來好像是藍色的彈簧)來填充起來；有的時候，在間隙比較明顯的時候，會在第1步和第2步中就新增一些分隔符。
選擇需要佈局的兩個或者多個視窗部件(或者分隔符，或者佈局；可以在每個上面都先按下 Ctrl 鍵再點選滑鼠)，然後再使用佈局管理器或者切分視窗（spilter) 對它們進行佈局。（補充：CTRL+滑鼠點選

：選中一些東西（連續選中，多選），然後對它們佈局）
重複第 5 步，直至所有的視窗部件和分隔符都佈局好為止。
點選窗體（就可以放棄選中的任何東西）並使用佈局管理器對其進行佈局。
為窗體的標籤建立夥伴。（補充：所謂的夥伴指的是繫結關係，比如：標籤與行編輯繫結為夥伴關係，可以通過標籤的加速鍵（比如：標籤的 Text 設定為 &File -> 按下 Alt 後，就可以變為 File），快速移動到行編輯處）
如果按鍵次序有問題，設定窗體的 Tab 鍵次序。（補充：Tab 可以快速切換一些鍵盤鍵入的輸入框）
在適當的地方為內建訊號和槽建立訊號-槽連線。
預覽窗體並檢查所有東西能否按照設想進行工作。
設定窗體的物件名(會在其類名中用到這個)、窗體的標題並儲存它，以便使其擁有一個檔名。例如，如果物件名是“PaymentDlg"，就應當給它的標題命名為“Payment"，檔名為 paymentdlg.ui。

大致，瞭解這一些內容，我們可以正式開始用控制元件搭建一個對話方塊了。

四、使用控制元件搭建對話方塊窗體

新建不帶按鈕的對話方塊視窗
在左邊 Display Widgets 中把 Label 拖入中間的窗體中
修改第一個標籤的屬性
輸入 Find &What:，可以雙擊輸入，或者右邊改（&作用是加速鍵 Alt，不懂可自查）：
在左邊 Input Widgets 中把 LineEdit 拖入中間的窗體中
修改第一個行編輯框的屬性
修改此行編輯框的物件名（作用是在後面的實際程式碼編寫中，還可以用到，因此取一個有意義的名字）
操作類似於：findLineEidt = QLabel()
重複上述幾個操作，變成下面這樣
第二個標籤的文字為Replace w&ith:
第二個行編輯框的物件名字為 replaceLineEidt
在左邊 Buttons 中把 check Box 拖入中間的窗體中
把複選框的文字改為&Case sensitive，物件名改為caseCheckBox
重複上述操作
把複選框的文字改為Wh&ole words，物件名改為wholeCheckBox
繼續新增一個 Syntax 的標籤
標籤的文字設定為&Syntax:
在左邊 Input Widgets 中把 Combo Box 拖入中間的窗體中
給組合框新增專案
右鍵點選組合框，選 Edit Items

點選加號

輸入Literal text與Regular expression

點選 OK
在左邊 Spacers 中把 Vertical Spacer 拖入中間的窗體中
如果使用者重新修改了窗體的尺寸大小，如果希望各個視窗部件能夠放在一起而不是分散開來，可以 Combo box 的下面放置一個豎直分隔符（Vertical Spacer）
在左邊 Display Widgets 中把 Vertical Line 拖入中間的窗體中
要讓這些按鈕能夠與已經創鍵的視窗部件在形式上區分開來，可以在它們和其他視窗部件之間放一根豎線。
在左邊 Buttons 中把 Push Button 拖入中間的窗體中
按鈕的文字為&Find，物件名為findButton
依次重複上述提到的操作，直至到下面的情況
依次輸入文字、物件名：
&Replace、replaceButton；
Replace &All、replaceAllButton；
Close、closeButton。
設定第一個佈局
CTRL+滑鼠，選中以下控制元件

點選網格佈局
接下來的依次佈局即可

對佈局和控制元件，可以繼續佈局，可以如果選起來不方便，可以在右上角的停靠視窗選擇
用方向鍵、快捷鍵等操作優化一下視窗
這就涉及到美學設計，這裡就隨便演示一下。
預覽一下，Ctrl+R
設定夥伴關係
這一步就可以消除之前標籤裡的&，並且讓夥伴功能上線。

F3 退出此狀態
設定 Tab 順序
用預設即可，F3 退出
繫結 Close 的槽函式

依次選擇 clicked()、reject()、ok，即把 Close 按鈕繫結到主窗體的關閉函式
設定窗體類名、標題名、檔名
點選空白窗體處，右邊修改窗體類名、標題名。

檔案儲存時，File->Save，命令為 findandreplacedlg.ui