• 構(gòu)建一個更加復制的GUI

• 在選項卡部件中應用多個層級

• 添加一個樹部件和一個日歷部件

• 使用一個刻度盤部件來控制一個LCD顯示器部件上的數(shù)字

• 連接刻度盤部件和LCD部件到一個單選按鈕上

• 使用一個單選按鈕來更新進度欄部件

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

我們使用Qt設計師創(chuàng)建一個稍顯復雜的GUI。其中包括：

• 兩個選項卡TabWidgets

• 兩個子選項卡TabWidgets

• 一個日期部件DateEdit

• 一個日歷部件CalendarWidget

• 一個樹形部件TreeWidget

• 一個組盒子GroupBox

• 三個單選按鈕RadioButton

• 一個字體選擇盒子FontComboBox

• 一個Lable標簽

• 一個進度條progressBar

• 一個刻度盤Dial

• 一個LCD數(shù)據(jù)顯示器LcdNumber

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

創(chuàng)建主選項卡

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

在選項卡1中創(chuàng)建一個子選項卡

繼續(xù)使用TabWidget部件，在選項卡1中創(chuàng)建一個子選項卡：

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

我們繼續(xù)使用TreeWidget部件，在剛剛創(chuàng)建的子選項卡1中創(chuàng)建一個樹，并添加一些信息：

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

現(xiàn)在切換到子選項卡2中，我們使用DateEdit部件和CalendarWidget部件，在子選項卡2中添加一個日期修改框和一個日歷框，采用垂直布局：

在選項卡2中添加按鈕組

選項卡1已經(jīng)構(gòu)建好了，現(xiàn)在切換到選項卡2。
我們先使用GroupBox部件在創(chuàng)建一個組部件，然后在其中添加三個PushButton部件：

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

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

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

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

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

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

這樣就完成了整個GUI的圖形界面設計。
接下來，我們創(chuàng)建信號/槽來實現(xiàn)GUI的事件響應。

轉(zhuǎn)換UI文件為Python文件

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

轉(zhuǎn)換UI文件后，新建一個Python文件，引入轉(zhuǎn)換為Python代碼的GUI窗口：

運行一下，看是否正常：

新建一個邏輯類

為了便于操作，我們創(chuàng)建一個新類MainWindow，將程序的主循環(huán)放入其中，其余的邏輯功能以類的方法的方式添加：

實現(xiàn)日歷選擇同步到日期選擇器

我們在選項卡1的子選項卡2中構(gòu)建了一個日期修改器和一個日歷。
我們需要在日歷上對日期進行點擊的時候，日期修改器上同步顯示我們選擇的日期。

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

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

完整的代碼如下：

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

實現(xiàn)LCD顯示器數(shù)字跟隨刻度盤變化

我們在組合子部件中放置了一個Dial刻度盤和LCDNumber顯示器。
我們可以設置LCD顯示器上的數(shù)字跟隨著刻度盤的變化而變化。

同樣是創(chuàng)建兩個方法：

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

實現(xiàn)按鈕控制進度欄

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

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

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

更新字體選擇

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

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

下一篇，我們介紹多線程在GUI中的使用。

有什么問題歡迎留言討論！