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 屬性來控制