Python 小白從零開始 PyQt5 專案實戰（6）視窗切換的堆疊布局

本系列面向 Python 小白，從零開始實戰解說應用 QtDesigner 進行 PyQt5 的專案實戰，
什么叫從零開始？從軟體安裝、環境配置開始，不跳過一個細節，不漏掉一行代碼，不省略一個例圖，
軟體專案中經常需要多種不同的圖形界面，以適應不同的任務場景，選項卡控制元件（QTackedWidget）通過標簽選擇打開對應的對話框頁面，不需要另外編程，堆疊視窗控制元件（QStackedWidget）在主程式中通過編程來控制顯示的圖形界面，相對比較復雜，但也更加通用和靈活，
本文以堆疊視窗控制元件為例，詳細介紹堆疊布局的界面設計和程式實作程序，通過案例帶小白創建一個典型的堆疊布局多視窗切換程式，

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 專案實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 專案實戰（2）選單和工具列
Python 小白從零開始 PyQt5 專案實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 專案實戰（4）基本控制元件
Python 小白從零開始 PyQt5 專案實戰（5）布局管理
Python 小白從零開始 PyQt5 專案實戰（6）視窗切換的堆疊布局

1. 堆疊布局簡介

1. 什么是堆疊布局（Stacked Layout）

布局管理就是管理圖形視窗中各個部件的位置和排列，圖形視窗中的大量部件也需要通過布局管理，對部件進行整理分組、排列定位，才能使界面友好，上一篇文中我們介紹了基本的水平布局、垂直布局、柵格布局、表格布局和進階的嵌套布局和容器布局，

在容器布局中，通過容器控制元件（Containers）與布局管理器（Layouts）的結合，可以實作對程式視窗的分割和布局，就可以自由設計各種豐富的圖形界面，

在實際的軟體專案中，通常需要多種/多個不同的圖形界面，以適應不同的任務場景，如何實作多視窗圖形界面的需求呢？大致來說有幾種思路：

• 使用彈出視窗，主視窗提供基本界面，通過彈出視窗實作子任務界面，子任務結束后關閉彈出視窗回到主視窗，
  這是一種可行的，也比較簡單的處理方案，很多應用程式中都設有彈出視窗，但是頻繁彈出和關閉視窗的用戶體驗不好，而且在視窗之間的切換不方便，

• 重建圖形界面，當呼叫新的圖形界面時，關閉后洗掉現有界面上的所有控制元件，再新建需要的各種控制元件，
  這種方案雖然可行，但是編程復雜、浪費資源、容易出錯，難以適應多視窗相互切換的要求，因此很少使用，在 QtDesigner 中也不支持這種方案的操作，

• 通過堆疊布局實作多視窗切換，堆疊布局是在視窗的整體或區域區域設定多組圖形界面，根據需要使用指定的圖形界面，

打個比方，這就好比戲劇或拍照中準備了多種背景幕布，需要什么場景，就展開所需的場景幕布，而把其它幕布收起來，

1.2 堆疊布局的實作方法

QStackedLayout 類提供了多頁面切換的堆疊布局，

選項卡控制元件（QTackedWidget）提供了選項卡對話框，外觀類似于瀏覽器頁面打開多個標簽頁，選項卡控制元件允許創建多個對話框頁面，每個頁面帶有自己的標簽，使用時點擊標簽行進行選擇，就打開對應的對話框頁面，不需要另外編程，

堆疊視窗控制元件（QStackedWidget）提供了更加通用和靈活的多視窗、多頁面切換的解決方案，QStackedWidget 控制元件可以添加在整個視窗或視窗中的任意區域，允許在堆疊視窗區域內設計多個頁面，在程式控制使用指定的視窗界面，

堆疊視窗控制元件（QStackedWidget）需要在主程式中通過編程來控制顯示的圖形界面，相對于選項卡控制元件（QTackedWidget） 來說比較復雜，但因此也更加靈活，

本文以堆疊視窗控制元件（QStackedWidget）為例，詳細介紹堆疊布局的界面設計和程式實作程序，

2. 創建多視窗切換的堆疊布局

• （1）以上文 uiDemo6.ui 為基礎：圖形視窗的左側上部為垂直布局的按鈕控制元件區域 leftLayout_1，設有多個按鈕控制元件，用于選擇不同的業務；左側下部為垂直布局的文本區域 leftLayout_2，設有文本顯示框，
• （2）將圖形視窗右側的主體區域設計為堆疊視窗，用于設計多個圖形界面，以適應不同的業務場景：
  • 在 QtDesigner 左側工具列 “Containers” 類中，選擇 “Stacked Widget” 控制元件，將其拖動至設計的圖形視窗中，創建堆疊布局的容器控制元件，
  • 對視窗中的堆疊容器 “Stacked Widget”，選中后可以用滑鼠拖動、拉伸來調整控制元件的位置和大小，或者在 “屬性編輯器” 中設定 (X, Y)、寬度、高度屬性，
  • 堆疊容器 “Stacked Widget” 自動建立了 2個頁面，滑鼠位于堆疊容器 “Stacked Widget” ，右鍵喚出下拉選單，選擇 "插入頁"可以插入新的頁面，選擇 “改變頁順序” 可以調整各頁面的順序，
  • 在控制元件的右上角顯示有一對黑色三角符號，可以在多個頁面之間切換，也可以在 “物件查看器” 中選擇要編輯的頁面，
• （3）堆疊容器 “Stacked Widget” 中各頁面的設計，具體設計內容是根據業務需要確定的，
  • page_0 的設計：標簽控制元件 label_1 用于顯示封面圖片，按鈕控制元件 pushButton_6~8 用于控制翻頁；
  • page_1 的設計：水平布局的標簽控制元件 label_2、label_3 用于顯示原始圖片和處理圖片，控制元件用于控制處理方法和引數，按鈕控制元件 pushButton_9~11 用于控制翻頁；
  • page_2 的設計：表格控制元件 tableWidget 控制元件用于顯示表格資料，按鈕控制元件用于控制，

將完成的堆疊布局界面設計檔案另存為 uiDemo8.ui，不同頁面的編輯狀態如下圖所示：

堆疊布局 page_0 設計圖：

堆疊布局 page_1 設計圖：

堆疊布局 page_2 設計圖：

3. 堆疊布局的主程式設計

使用堆疊視窗控制元件（QStackedWidget）建立的堆疊布局界面，要在主程式中通過編程控制顯示哪一個圖形界面，

3.1 QStackedWidget 類

QStackedWidget 類繼承自 QFrame類，QStackedWidge t類提供了多頁面切換的布局，一次只能看到一個界面，

QStackedWidget 類的信號：

• currentChanged(int index)：當前頁面發生變化時候發射，index 為新的索引值，
• widgetRemoved(int index)：頁面被移除時候發射，index 為頁面對應的索引值，

QStackedWidget 類的槽函式：

• setCurrentIndex(int index)：設定索引 index 所在的頁面為當前頁面，
• setCurrentWidget(QWidget *widget)：設定QWidget頁面為當前頁面，

簡單地說，使用如下程式可以設定 page_0 為當前顯示的頁面：

    pageNo = 0  # 設定 page_0 為索引頁（第一頁面）
    self.stackedWidget.setCurrentIndex(pageNo)  # 設定使用 pageNo=0 作為當前顯示頁面

需要注意的是，不論我們為每個頁面控制元件設定的名稱（objectName）是什么，在 QStackedWidget 類中定義的頁面索引 index 都是一個從 0 開始計數，即：第一頁面的索引值 index=0，第二頁面的索引值 index=1，…，

因此，為了避免混淆，建議將 StackedWidge 控制元件的第一頁面命名為 objectName: page_0，第二頁面命名為 objectName: page_1，…

3.2 建立信號/槽連接

建立信號/槽連接，既可以在 QtDesigner 中設定，也可以在主程式中通程序式實作，

以下例程是在程式中建立信號/槽連接，

    # 通過 connect 建立信號/槽連接，點擊按鈕事件發射 triggered 信號，執行相應的子程式 click_pushButton
    self.pushButton_1.clicked.connect(self.click_pushButton_1)  # 點擊 pushButton_1 觸發
    self.pushButton_2.clicked.connect(self.click_pushButton_2)  # 點擊 pushButton_2 觸發
    self.pushButton_3.clicked.connect(self.click_pushButton_3)  # 點擊 pushButton_3 觸發

3.3 頁面控制程式

通過編程控制堆疊視窗控制元件的顯示頁面，就是說當前顯示哪一個圖形界面，

一種簡單的方法是，在任務場景的子程式中，直接使用 setCurrentIndex() 設定選擇堆疊控制元件的顯示頁面，通俗的說就是，任務需要使用哪個場景時，就在程式中撰寫頁面設定陳述句進行選擇，例如：

def click_pushButton_1(self):  # 點擊 pushButton_1 觸發
    self.textEdit.append("當前動作：click_pushButton_1")
    self.textEdit.append("選擇堆疊布局頁面：page_0")
    self.stackedWidget.setCurrentIndex(0)  # 打開 stackedWidget > page_0
    self.label_1.setPixmap(QtGui.QPixmap("../image/fractal01.png"))
    return

另一種高級的應用方法是，通過自定義頁面控制函式，獲取當前信號 sender 檢索 objectName，來選擇堆疊視窗控制元件的顯示頁面，這種方法更清晰地體現業務與界面的分離，例如：

    def frameController(self):  # 頁面控制函式
        sender = self.sender().objectName()  # 獲取當前信號 sender
        index = {
            "pushButton_1": 0,  # page_0
            "pushButton_2": 1,  # page_1
            "pushButton_3": 2,  # page_2
        }
        self.stackedWidget.setCurrentIndex(index[sender])  # 根據信號 index 設定所顯示的頁面

3.4 堆疊布局中的控制元件操作

控制元件操作包括控制元件發出信號和在槽函式中進行操作，

在用戶撰寫的程式中，需要接收控制元件信號、或在槽函式中對控制元件進行操作，都要通過控制元件的 objectName 來實作，

例如，點擊按鈕 “第一章”（pushButton_1），就選擇堆疊布局頁面 “page_0”；要在標簽控制元件 “label_1” 顯示圖片 “…/image/fractal01.png”，就使用以下的程式：

    self.label_1.setPixmap(QtGui.QPixmap("../image/fractal01.png"))

而對于堆疊布局頁面 “page_0” 中的按鈕控制元件 “上一張”、“下一張”、“回傳”，要實作點擊按鈕時執行相應的任務，則應以控制元件的 objectName 建立觸發信號與槽函式的連接，例如：

    # 通過 connect 建立信號/槽連接，點擊按鈕事件發射 triggered 信號，執行相應的子程式 click_pushButton
    self.pushButton_6.clicked.connect(self.click_pushButton_6)  # 點擊按鈕 "上一張" 觸發
    self.pushButton_7.clicked.connect(self.click_pushButton_7)  # 點擊按鈕 "下一張" 觸發
    self.pushButton_8.clicked.connect(self.click_pushButton_8)  # 點擊按鈕 "回傳" 觸發

需要特別提醒的是：堆疊布局的每個頁面中的各個控制元件都是相互獨立的不同的控制元件，具有不同的控制元件名稱 objectName，

例如，page_0 中的按鈕控制元件 “上一張”、“下一張”，與 page_1 中的按鈕控制元件 “上一張”、"下一張"是不同的控制元件，具有不同的控制元件名稱 objectName，

從 QtDesigner 可以清楚地看到所有控制元件名稱及隸屬關系，“stackedWidget” 堆疊布局頁面 “page_0” 中的按鈕控制元件 “上一張”、“下一張”、“回傳”，objectName 分別是 pushButton_6、pushButton_7、pushButton_8；而頁面 “page_1” 中的按鈕控制元件 “上一張”、“下一張”、“回傳”，objectName 分別是 pushButton_9、pushButton_10、pushButton_11，

4. 程式運行圖

先上兩張程式運行結果圖，

我們的圖形視窗如圖所示，看起來已經有模有樣了，

需要放完整程式嗎？如果需要的話請在評論區留言，

【本節完】

著作權宣告：

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』 原創作品

原創作品，轉載必須標注原文鏈接：(https://blog.csdn.net/youcans/article/details/120758726)

Copyright 2021 youcans, XUPT

Crated：2021-10-16

歡迎關注『Python 小白從零開始 PyQt5 專案實戰 @ Youcans』系列，持續更新中
Python 小白從零開始 PyQt5 專案實戰（1）安裝與環境配置
Python 小白從零開始 PyQt5 專案實戰（2）選單和工具列
Python 小白從零開始 PyQt5 專案實戰（3）信號與槽的連接
Python 小白從零開始 PyQt5 專案實戰（4）基本控制元件
Python 小白從零開始 PyQt5 專案實戰（5）布局管理
Python 小白從零開始 PyQt5 專案實戰（6）視窗切換的堆疊布局