PyQt5利用Qt designer(QT設計師)使用tab widget和stacked widget實作多頁面切換

PyQt5 Qt designer QT設計師 使用tab widget和stacked widget實作多頁面切換

• 一、使用Qt designer(QT設計師)進行多頁面切換ui設計
• 二、實作tab widget多頁面切換
• 三、實作stacked widget多頁面切換
• 四、生成代碼
• 五、運作效果

一、使用Qt designer(QT設計師)進行多頁面切換ui設計

本文隻提供一種設計思路來完成簡單的頁面切換功能，并沒有涉及頁面的美化以及複雜的業務功能實作。

點選tab頁對tab widget的tab頁進行切換效果圖：

點選radio button驅動stacked widget多頁面切換效果圖：

下面進行分步說明。

打開qt designer，建立一個widget視窗。

将一個tab widget拖入其中

在視窗内空白部分點選右鍵，選擇布局中的垂直布局

tab widget預設隻有2個tab，如果需要更多的話，可以按照需求自行插入新的tab頁。比如這裡想在tab2後面再插一個tab3，那麼選中tab2，然後右鍵點選，選擇在目前頁之後插入

tab頁的标題根據自己的需求進行調整

下面我們主要對tab1進行主要的設計，以此說明原理

在tab1上拖入一個Scroll Area，準備在裡面放3個部分内容。以便拖動展示。

設定Scroll Area的大小

在Scroll Area内，放入3個Frame，表示3個子產品

點選Scroll Area， 對其進行垂直布局，這樣3個Frame就可以變整齊了

将3個Frame的拉伸比例設定為1:1:1

依次點選每個Frame，右鍵單擊，選擇改變樣式表，為其添加背景色，這樣3個Frame就可以很容易肉眼區分了

效果如下：

然後我們針對第一個Frame進行設計，其他兩個Frame，以此類推，這樣就可以通過每個Frame展示不同的内容。

在Frame1中拖入一個Stacked Widget, 用于展示3個不同的頁面

再拖入一個Widget, 用于放置3個按鈕

選中Frame1，對其進行垂直布局

将widget的高度設為30

然後拖動3個radio button到這個widget裡，并将它們的最大高度和寬度都設為16

右鍵單擊widget，對其進行水準布局

然後再在widget内這3個按鈕的兩側分别放置兩個水準彈簧, 就可以将3個radio button壓縮到正中間

因為我們有3個radio button，stacked widget預設提供2個頁面，我們再加一個，方法同上面tab widget加頁面是一樣的, 這三個radio button分别對應stacked widget中的3個頁面

我們給stacked widget中的三個page頁面分别添加一張圖檔，以示區分。添加完成後，此時，點選右上角那兩個前後箭頭，應該可以看到頁面能正常切換

這裡關于怎麼添加資源檔案，就不贅述了。我們這裡是建立了一個資源檔案，名字叫resource, 對應的檔案就是下文提到的resource.qrc

在為Frame添加了圖檔之後，原來的背景色就被我删掉了。是以後面運作時看不到之前添加的背景色了。

多頁面切換的ui設計示例就到此結束了。目前還缺少頁面切換功能的實作。

二、實作tab widget多頁面切換

它的實作比較簡單，在ui頁面，添加對應的信号和槽函數即可。

信号是currentChanged(int), 槽函數是setCurrentIndex(int)

三、實作stacked widget多頁面切換

stacked widget的多頁面切換，我們是通過3個radio button來驅動的，點中哪個radio button，就切換到stacked widget的對應某個頁面。

為此，我們也需要設定stacked widget的信号和槽，和上面tab widget一樣。信号是currentChanged(int), 槽函數是setCurrentIndex(int)

但是怎麼和radio button關聯呢，為此我們還需要手動負責currentChanged(int)信号的發射。這将在代碼中展現。

四、生成代碼

首先，将資源檔案resource.qrc和ui檔案my_tab_widget.ui轉換為py格式。

# 将qrc資源檔案編譯為二進制檔案
pyrcc5 -o resource_rc.py resource.qrc

# 将ui檔案生成為相關的類
pyuic5 -o my_tab_widget.py my_tab_widget.ui
           

這裡我們生成了resource_rc.py和my_tab_widget.py

需要注意的是，由于我們的資源檔案名為resource.qrc，在執行以下轉換指令之後

pyuic5 -o my_tab_widget.py my_tab_widget.ui
           

生成的my_tab_widget.py最後，會自動生成一句：

import resource_rc
           

是以我們在轉換資源檔案resource.qrc時，需要将其名稱指定為resource_rc.py, 否則在程式運作時，會報錯，提示找不到resource_rc子產品。

這些工作做完後，我們建立一個main.py, 内容如下：

main.py

from PyQt5.QtWidgets import QApplication, QWidget
import sys
from my_tab_widget import Ui_Form

class MyUI(QWidget, Ui_Form):
    def __init__(self):
        super().__init__()
        super().setupUi(self)

        # 這裡我們将radio button的clicked信号，綁定到自定義的槽函數上
        self.radioButton.clicked.connect(self.radioButton_click_handler)
        self.radioButton_2.clicked.connect(self.radioButton_2_click_handler)
        self.radioButton_3.clicked.connect(self.radioButton_3_click_handler)
        
    # 自定義的槽函數，用于發射stackedWidget的currentChanged信号，來驅動頁面的切換
    def radioButton_click_handler(self):
        self.stackedWidget.currentChanged.emit(0)
        
    def radioButton_2_click_handler(self):
        self.stackedWidget.currentChanged.emit(1)
        
    def radioButton_3_click_handler(self):
        self.stackedWidget.currentChanged.emit(2)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    
    my_widget = MyUI()
    my_widget.show()
    
    sys.exit(app.exec_())

           

在main.py裡，我們自定義了一個MyUI類，繼承自我們設計的ui界面，并在其中将radio button的clicked信号綁定到自定義的槽函數上，用于發射stackedWidget的currentChanged信号，以此驅動stackedWidget的頁面切換。

五、運作效果

點選tab頁對tab widget的tab頁進行切換：

點選radio button驅動stacked widget多頁面切換：