Python GUI教程（十）：創建一個複雜的GUI

01-29

文章首發：Python GUI教程（十）：創建一個複雜的GUI

本篇將會涉及：

構建一個更加複製的GUI
在選項卡部件中應用多個層級
添加一個樹部件和一個日曆部件
使用一個刻度盤部件來控制一個LCD顯示器部件上的數字
連接刻度盤部件和LCD部件到一個單選按鈕上
使用一個單選按鈕來更新進度欄部件

延續上一篇的解耦思想，我們使用Qt設計師創建一個基本的包含各個部件的圖形窗口，再在邏輯代碼中對圖形窗口進行調用和操作。

創建一個複雜的GUI

我們使用Qt設計師創建一個稍顯複雜的GUI。其中包括：

兩個選項卡TabWidgets
兩個子選項卡TabWidgets
一個日期部件DateEdit
一個日曆部件CalendarWidget
一個樹形部件TreeWidget
一個組盒子GroupBox
三個單選按鈕RadioButton
一個字體選擇盒子FontComboBox
一個Lable標籤
一個進度條progressBar
一個刻度盤Dial
一個LCD數據顯示器LcdNumber

所有的步驟通過Qt設計師的拖拽就可以完成。

創建主選項卡

新建一個主窗口，拖拽TabWidget部件到主窗口中：

在選項卡1中創建一個子選項卡

繼續使用TabWidget部件，在選項卡1中創建一個子選項卡：

在子選項卡1中添加一個樹部件

我們繼續使用TreeWidget部件，在剛剛創建的子選項卡1中創建一個樹，並添加一些信息：

在子選項卡2中添加日期和日曆部件

現在切換到子選項卡2中，我們使用DateEdit部件和CalendarWidget部件，在子選項卡2中添加一個日期修改框和一個日曆框，採用垂直布局：

在選項卡2中添加按鈕組

選項卡1已經構建好了，現在切換到選項卡2。

我們先使用GroupBox部件在創建一個組部件，然後在其中添加三個PushButton部件：

在選項卡2中添加刻度和LCD部件

我們再在選項卡2中添加一個刻度盤和LCD顯示器，放置在一個組部件中：

在選項卡2中添加一個字體選擇器

接著，使用FontComboBox部件和Label部件，在選項卡2中添加一個字體選擇器和文本顯示：

在選項卡2中添加一個進度欄

最後，我們使用ProcessBar部件在選項卡2中添加一個進度欄：

這樣就完成了整個GUI的圖形界面設計。

接下來，我們創建信號/槽來實現GUI的事件響應。

構建信號/槽

轉換UI文件為Python文件

我們首先轉換設計好的UI文件為Python文件，按照之前的解耦思想，將界面代碼與邏輯代碼分離。

轉換UI文件後，新建一個Python文件，引入轉換為Python代碼的GUI窗口：

# coding:utf-8nnfrom PyQt5 import QtCore,QtWidgets,QtGuinfrom GUI import complexnnif __name__ == "__main__":n import sysn app = QtWidgets.QApplication(sys.argv)n MainWindow = QtWidgets.QMainWindow()n ui = complex.Ui_MainWindow()n ui.setupUi(MainWindow)n MainWindow.show()n sys.exit(app.exec_())n

運行一下，看是否正常：

新建一個邏輯類

為了便於操作，我們創建一個新類MainWindow，將程序的主循環放入其中，其餘的邏輯功能以類的方法的方式添加：

# coding:utf-8n# 州的先生 zmister.com Python GUI教程nnfrom PyQt5 import QtCore,QtWidgets,QtGuinfrom GUI import complexnimport sysnnclass MainWindow(object):n def __init__(self):n app = QtWidgets.QApplication(sys.argv)n MainWindow = QtWidgets.QMainWindow()n ui = complex.Ui_MainWindow()n ui.setupUi(MainWindow)n MainWindow.show()n sys.exit(app.exec_())nnif __name__ == "__main__":n MainWindow()n

實現日曆選擇同步到日期選擇器

我們在選項卡1的子選項卡2中構建了一個日期修改器和一個日曆。

我們需要在日曆上對日期進行點擊的時候，日期修改器上同步顯示我們選擇的日期。

我們在MainWindow()類中，新建一個update_date()方法，用於設置日期修改器的數值：

def update_date(self):n self.ui.dateEdit.setDate(self.ui.calendarWidget.selectedDate()) n

再新建一個update_calendar()方法，用於設置點擊日曆的信號/槽，將其響應到日期修改器上：

def update_calendar(self):n self.ui.calendarWidget.selectionChanged.connect(self.update_date)n

完整的代碼如下：

# coding:utf-8n# 州的先生 zmister.com Python GUI教程nnfrom PyQt5 import QtCore,QtWidgets,QtGuinfrom GUI import complexnimport sysnnclass MainWindow(object):n def __init__(self):n app = QtWidgets.QApplication(sys.argv)n MainWindow = QtWidgets.QMainWindow()n self.ui = complex.Ui_MainWindow()n self.ui.setupUi(MainWindow)n self.update_date()n self.update_calendar()n MainWindow.show()n sys.exit(app.exec_())nn # 修改日期修改器數值n def update_date(self):n self.ui.dateEdit.setDate(self.ui.calendarWidget.selectedDate())nn # 日曆信號槽n def update_calendar(self):n self.ui.calendarWidget.selectionChanged.connect(self.update_date)nnif __name__ == "__main__":n MainWindow()n

這樣，我們點擊了日曆上的一個日期，日期修改器上就會顯示我們點擊日期。

實現LCD顯示器數字跟隨刻度盤變化

我們在組合子部件中放置了一個Dial刻度盤和LCDNumber顯示器。

我們可以設置LCD顯示器上的數字跟隨著刻度盤的變化而變化。

同樣是創建兩個方法：

# 設置LCD數字ndef set_lcd(self):n self.ui.lcdNumber.display(self.ui.dial.value())nn# 刻度盤信號槽ndef set_dial(self):n self.ui.dial.valueChanged[int].connect(self.set_lcd)n

一個用來設置LCD顯示器的數字，一個用來響應刻度盤的信號。

實現按鈕控制進度欄

我們在選項卡2中放置了3個單選按鈕，和一個進度條，現在我們讓單選按鈕來控制進度欄的進度。其中，第一個按鈕是默認選項，第二個按鈕用來重置清零進度欄，第三個按鈕用來根據LCD上的數字來更新。

設置第二個按鈕清零進度欄，新建一個方法：

def zero_process(self):n self.ui.radioButton_2.clicked.connect(self.ui.progressBar.reset)n n

設置第三個按鈕的功能，新建兩個方法：

# 更新進度欄ndef update_process(self):n value = self.ui.lcdNumber.value()n self.ui.progressBar.setValue(value)nn # 點擊按鈕3ndef click_radio3(self):n self.ui.radioButton_3.clicked.connect(self.update_process)n n

更新字體選擇

我們還在選項卡2中放置了一個字體選擇部件和一個label標籤部件，我們可以設置選擇了某個字體，就顯示在label標籤上。

def set_font(self): n self.ui.fontComboBox.activated[QString].connect(self.ui.label.setText)n n

這樣，一個稍顯複雜的GUI就完成了。