Python Qt 學習筆記(三) Qt Designer


Qt Designer簡介

Qt Designer是用Qt Widgets來設計創建GUIs的工具。它能讓你用所見即所得的方式定制窗口或者對話框,還能用不同風格和分辨率對設計的GUIs進行測試。

designer.exe在Python安裝目錄下的\Lib\site-packages\PySide2里。

通過 Qt Designer 設計的界面,最終是保存在一個ui文件中的。打開ui文件,就是一個XML格式的界面定義。

 

動態加載UI文件

打開designer.exe,通過拖拽控件來制作一個簡單的界面

 我將這個ui文件保存在E:\python項目\Qt項目\stats.ui

有了界面定義文件,我們的Python程序就可以從文件中加載UI定義,並且動態創建一個相應的窗口對象。

編寫Python程序

 1 from PySide2.QtWidgets import QApplication, QMessageBox
 2 from PySide2.QtUiTools import QUiLoader
 3 from PySide2.QtCore import QFile
 4 
 5 
 6 class Stats:
 7 
 8     def __init__(self):
 9         # 從文件中加載UI定義
10         qfile_stats = QFile("E:\\python項目\\Qt項目\\stats.ui")
11         qfile_stats.open(QFile.ReadOnly)
12         qfile_stats.close()
13 
14         # 從 UI 定義中動態 創建一個相應的窗口對象
15         # 注意:里面的控件對象也成為窗口對象的屬性了
16         # 比如 self.ui.button , self.ui.textEdit
17         self.ui = QUiLoader().load(qfile_stats)
18 
19         self.ui.pushButton.clicked.connect(self.handleCalc)
20 
21     def handleCalc(self):
22         info = self.ui.textEdit.toPlainText()
23 
24         salary_above_20k = ''
25         salary_below_20k = ''
26         for line in info.splitlines():
27             if not line.strip():
28                 continue
29             parts = line.split(' ')
30 
31             parts = [p for p in parts if p]
32             name, salary, age = parts
33             if int(salary) >= 20000:
34                 salary_above_20k += name + '\n'
35             else:
36                 salary_below_20k += name + '\n'
37 
38         QMessageBox.about(self.ui,
39                           '統計結果',
40                           f'''薪資20000 以上的有:\n{salary_above_20k}
41                     \n薪資20000 以下的有:\n{salary_below_20k}'''
42                           )
43 
44 
45 app = QApplication([])
46 stats = Stats()
47 stats.ui.show()
48 app.exec_()

 運行效果圖

 核心代碼是這段

 1     def __init__(self):
 2         # 從文件中加載UI定義
 3         qfile_stats = QFile("E:\\python項目\\Qt項目\\stats.ui")
 4         qfile_stats.open(QFile.ReadOnly)
 5         qfile_stats.close()
 6 
 7         # 從 UI 定義中動態 創建一個相應的窗口對象
 8         # 注意:里面的控件對象也成為窗口對象的屬性了
 9         # 比如 self.ui.button , self.ui.textEdit
10         self.ui = QUiLoader().load(qfile_stats)
11 
12         self.ui.pushButton.clicked.connect(self.handleCalc)

這樣,調整界面只需在designer里拖拽控件,不用做其他代碼修改,Python程序它會自動同步。界面和代碼分離。

 

界面布局 Layout

前面寫的程序有個問題,就是整體縮放時,里面的控件沒有跟着一起縮放

 

我們希望里面的控件跟着主窗口一起縮放,Layout就是實現這個功能的。

我們最常用的 Layout布局 有4種,分別是

  • QHBoxLayout 水平布局

QHBoxLayout 把控件從左到右 水平橫着擺放,如下所示

  • QVBoxLayout 垂直布局

QHBoxLayout 把控件從上到下豎着擺放,如下所示

  • QGridLayout 表格布局

QGridLayout 把多個控件 格子狀擺放,有的控件可以 占據多個格子,如下所示

  • QFormLayout 表單布局

QFormLayout 表單就像一個只有兩列的表格,非常適合填寫注冊表單這種類型的界面,如下所示

 

整體布局設置為垂直布局

 

 可以看到一起縮放

 

 這個界面太過簡單,直接對整體設置了布局。一般復雜的界面要對里面的各個控件進行分組,分別對每一組進行布局設置,最后設置整體布局。

 

調整控件大小和位置

調整layout中控件的大小比例

可以通過設定控件的sizePolicy來調整

比如要將上面程序的統計按鈕縮小,通過設置sizePolicy里的水平策略值為Fixed

 

 居中操作

由於要對控件設置布局需要至少兩個控件一起,而這里只有一個控件。可以先創建一個水平布局區域,通過拖拽。

 

 拖拽后的那個區域由於還沒有任何控件,那個區域就只顯示為一條線,控件無法拖進里面。

這時可將控件拖到那個區域所對應的對象里面

 

 

 

調整比例大小,(直接貼上教程里的圖),通過設置水平伸展可以調整三個控件水平的比例大小

 

 

 調整控件間距

要調整控件上下間距,可以給控件添加layout,然后通過設定layout的上下的padding 和 margin 來調整間距。

要調整控件的左右間距,可以通過添加 horizontal spacer 進行控制,也可以通過layout的左右margin

(教程里的圖)

 

 界面布局步驟建議

  • 先不使用任何Layout,把所有控件 按位置 擺放在界面上

  • 然后先從 最內層開始 進行控件的 Layout 設定

  • 逐步拓展到外層 進行控件的 Layout設定

  • 最后調整 layout中控件的大小比例, 優先使用 Layout的 layoutStrentch 屬性來控制

視頻鏈接

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM