軟件項(xiàng)目中經(jīng)常需要多種不同的圖形界面，以適應(yīng)不同的任務(wù)場(chǎng)景。選項(xiàng)卡控件（QTackedWidget）通過標(biāo)簽選擇打開對(duì)應(yīng)的對(duì)話框頁(yè)面，不需要另外編程。堆疊窗口控件（QStackedWidget）在主程序中通過編程來控制顯示的圖形界面，相對(duì)比較復(fù)雜，但也更加通用和靈活。

1. 堆疊布局簡(jiǎn)介

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

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

在容器布局中，通過容器控件（Containers）與布局管理器（Layouts）的結(jié)合，可以實(shí)現(xiàn)對(duì)程序窗口的分割和布局，就可以自由設(shè)計(jì)各種豐富的圖形界面。

在實(shí)際的軟件項(xiàng)目中，通常需要多種/多個(gè)不同的圖形界面，以適應(yīng)不同的任務(wù)場(chǎng)景。如何實(shí)現(xiàn)多窗口圖形界面的需求呢？大致來說有幾種思路：

• 使用彈出窗口。主窗口提供基本界面，通過彈出窗口實(shí)現(xiàn)子任務(wù)界面，子任務(wù)結(jié)束后關(guān)閉彈出窗口回到主窗口。
  這是一種可行的，也比較簡(jiǎn)單的處理方案，很多應(yīng)用程序中都設(shè)有彈出窗口。但是頻繁彈出和關(guān)閉窗口的用戶體驗(yàn)不好，而且在窗口之間的切換不方便。
• 重建圖形界面。當(dāng)調(diào)用新的圖形界面時(shí)，關(guān)閉后刪除現(xiàn)有界面上的所有控件，再新建需要的各種控件。
  這種方案雖然可行，但是編程復(fù)雜、浪費(fèi)資源、容易出錯(cuò)，難以適應(yīng)多窗口相互切換的要求，因此很少使用。在 QtDesigner 中也不支持這種方案的操作。
• 通過堆疊布局實(shí)現(xiàn)多窗口切換。堆疊布局是在窗口的整體或局部區(qū)域設(shè)置多組圖形界面，根據(jù)需要使用指定的圖形界面。

打個(gè)比方，這就好比戲劇或拍照中準(zhǔn)備了多種背景幕布，需要什么場(chǎng)景，就展開所需的場(chǎng)景幕布，而把其它幕布收起來。

1.2 堆疊布局的實(shí)現(xiàn)方法

QStackedLayout 類提供了多頁(yè)面切換的堆疊布局。

選項(xiàng)卡控件（QTackedWidget）提供了選項(xiàng)卡對(duì)話框，外觀類似于瀏覽器頁(yè)面打開多個(gè)標(biāo)簽頁(yè)。選項(xiàng)卡控件允許創(chuàng)建多個(gè)對(duì)話框頁(yè)面，每個(gè)頁(yè)面帶有自己的標(biāo)簽。使用時(shí)點(diǎn)擊標(biāo)簽行進(jìn)行選擇，就打開對(duì)應(yīng)的對(duì)話框頁(yè)面，不需要另外編程。

堆疊窗口控件（QStackedWidget）提供了更加通用和靈活的多窗口、多頁(yè)面切換的解決方案。QStackedWidget 控件可以添加在整個(gè)窗口或窗口中的任意區(qū)域，允許在堆疊窗口區(qū)域內(nèi)設(shè)計(jì)多個(gè)頁(yè)面，在程序控制使用指定的窗口界面。

堆疊窗口控件（QStackedWidget）需要在主程序中通過編程來控制顯示的圖形界面，相對(duì)于選項(xiàng)卡控件（QTackedWidget） 來說比較復(fù)雜，但因此也更加靈活。

本文以堆疊窗口控件（QStackedWidget）為例，詳細(xì)介紹堆疊布局的界面設(shè)計(jì)和程序?qū)崿F(xiàn)過程。

2. 創(chuàng)建多窗口切換的堆疊布局

（1）以上文 uiDemo6.ui 為基礎(chǔ)：圖形窗口的左側(cè)上部為垂直布局的按鈕控件區(qū)域 leftLayout_1，設(shè)有多個(gè)按鈕控件，用于選擇不同的業(yè)務(wù)；左側(cè)下部為垂直布局的文本區(qū)域 leftLayout_2，設(shè)有文本顯示框。

（2）將圖形窗口右側(cè)的主體區(qū)域設(shè)計(jì)為堆疊窗口，用于設(shè)計(jì)多個(gè)圖形界面，以適應(yīng)不同的業(yè)務(wù)場(chǎng)景：

在 QtDesigner 左側(cè)工具欄 “Containers” 類中，選擇 “Stacked Widget” 控件，將其拖動(dòng)至設(shè)計(jì)的圖形窗口中，創(chuàng)建堆疊布局的容器控件。

• 對(duì)窗口中的堆疊容器 “Stacked Widget”，選中后可以用鼠標(biāo)拖動(dòng)、拉伸來調(diào)整控件的位置和大小，或者在 “屬性編輯器” 中設(shè)置 (X, Y)、寬度、高度屬性。
• 堆疊容器 “Stacked Widget” 自動(dòng)建立了 2個(gè)頁(yè)面。鼠標(biāo)位于堆疊容器 “Stacked Widget” ，右鍵喚出下拉菜單，選擇 "插入頁(yè)"可以插入新的頁(yè)面，選擇 “改變頁(yè)順序” 可以調(diào)整各頁(yè)面的順序。
• 在控件的右上角顯示有一對(duì)黑色三角符號(hào)，可以在多個(gè)頁(yè)面之間切換，也可以在 “對(duì)象查看器” 中選擇要編輯的頁(yè)面。

（3）堆疊容器 “Stacked Widget” 中各頁(yè)面的設(shè)計(jì)，具體設(shè)計(jì)內(nèi)容是根據(jù)業(yè)務(wù)需要確定的。

•  page_0 的設(shè)計(jì)：標(biāo)簽控件 label_1 用于顯示封面圖片，按鈕控件 pushButton_6~8 用于控制翻頁(yè)；
• page_1 的設(shè)計(jì)：水平布局的標(biāo)簽控件 label_2、label_3 用于顯示原始圖片和處理圖片，控件用于控制處理方法和參數(shù)，按鈕控件 pushButton_9~11 用于控制翻頁(yè)；
• page_2 的設(shè)計(jì)：表格控件 tableWidget 控件用于顯示表格數(shù)據(jù)，按鈕控件用于控制。

將完成的堆疊布局界面設(shè)計(jì)文件另存為 uiDemo8.ui，不同頁(yè)面的編輯狀態(tài)如下圖所示：

堆疊布局 page_0 設(shè)計(jì)圖：

堆疊布局 page_1 設(shè)計(jì)圖：

堆疊布局 page_2 設(shè)計(jì)圖：

3. 堆疊布局的主程序設(shè)計(jì)

使用堆疊窗口控件（QStackedWidget）建立的堆疊布局界面，要在主程序中通過編程控制顯示哪一個(gè)圖形界面。

3.1 QStackedWidget 類

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

QStackedWidget 類的信號(hào)：

• currentChanged(int index)：當(dāng)前頁(yè)面發(fā)生變化時(shí)候發(fā)射，index 為新的索引值。
• widgetRemoved(int index)：頁(yè)面被移除時(shí)候發(fā)射，index 為頁(yè)面對(duì)應(yīng)的索引值。

QStackedWidget 類的槽函數(shù)：

• setCurrentIndex(int index)：設(shè)置索引 index 所在的頁(yè)面為當(dāng)前頁(yè)面。
• setCurrentWidget(QWidget *widget)：設(shè)置QWidget頁(yè)面為當(dāng)前頁(yè)面。

簡(jiǎn)單地說，使用如下程序可以設(shè)置 page_0 為當(dāng)前顯示的頁(yè)面：

    pageNo = 0  # 設(shè)置 page_0 為索引頁(yè)（第一頁(yè)面）
    self.stackedWidget.setCurrentIndex(pageNo)  # 設(shè)置使用 pageNo=0 作為當(dāng)前顯示頁(yè)面

需要注意的是，不論我們?yōu)槊總€(gè)頁(yè)面控件設(shè)置的名稱（objectName）是什么，在 QStackedWidget 類中定義的頁(yè)面索引 index 都是一個(gè)從 0 開始計(jì)數(shù)，即：第一頁(yè)面的索引值 index=0，第二頁(yè)面的索引值 index=1，…。

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

3.2 建立信號(hào)/槽連接

建立信號(hào)/槽連接，既可以在 QtDesigner 中設(shè)置，也可以在主程序中通過程序?qū)崿F(xiàn)。

以下例程是在程序中建立信號(hào)/槽連接。

    # 通過 connect 建立信號(hào)/槽連接，點(diǎn)擊按鈕事件發(fā)射 triggered 信號(hào)，執(zhí)行相應(yīng)的子程序 click_pushButton
    self.pushButton_1.clicked.connect(self.click_pushButton_1)  # 點(diǎn)擊 pushButton_1 觸發(fā)
    self.pushButton_2.clicked.connect(self.click_pushButton_2)  # 點(diǎn)擊 pushButton_2 觸發(fā)
    self.pushButton_3.clicked.connect(self.click_pushButton_3)  # 點(diǎn)擊 pushButton_3 觸發(fā)

3.3 頁(yè)面控制程序

通過編程控制堆疊窗口控件的顯示頁(yè)面，就是說當(dāng)前顯示哪一個(gè)圖形界面。

一種簡(jiǎn)單的方法是，在任務(wù)場(chǎng)景的子程序中，直接使用 setCurrentIndex() 設(shè)置選擇堆疊控件的顯示頁(yè)面。通俗的說就是，任務(wù)需要使用哪個(gè)場(chǎng)景時(shí)，就在程序中編寫頁(yè)面設(shè)置語(yǔ)句進(jìn)行選擇。例如：

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

另一種高級(jí)的應(yīng)用方法是，通過自定義頁(yè)面控制函數(shù)，獲取當(dāng)前信號(hào) sender 檢索 objectName，來選擇堆疊窗口控件的顯示頁(yè)面。這種方法更清晰地體現(xiàn)業(yè)務(wù)與界面的分離。例如：

    def frameController(self):  # 頁(yè)面控制函數(shù)
        sender = self.sender().objectName()  # 獲取當(dāng)前信號(hào) sender
        index = {
            "pushButton_1": 0,  # page_0
            "pushButton_2": 1,  # page_1
            "pushButton_3": 2,  # page_2
        }
        self.stackedWidget.setCurrentIndex(index[sender])  # 根據(jù)信號(hào) index 設(shè)置所顯示的頁(yè)面

3.4 堆疊布局中的控件操作

控件操作包括控件發(fā)出信號(hào)和在槽函數(shù)中進(jìn)行操作。

在用戶編寫的程序中，需要接收控件信號(hào)、或在槽函數(shù)中對(duì)控件進(jìn)行操作，都要通過控件的 objectName 來實(shí)現(xiàn)。

例如，點(diǎn)擊按鈕 “第一章”（pushButton_1），就選擇堆疊布局頁(yè)面 “page_0”；要在標(biāo)簽控件 “l(fā)abel_1” 顯示圖片 “…/image/fractal01.png”，就使用以下的程序：

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

而對(duì)于堆疊布局頁(yè)面 “page_0” 中的按鈕控件 “上一張”、“下一張”、“返回”，要實(shí)現(xiàn)點(diǎn)擊按鈕時(shí)執(zhí)行相應(yīng)的任務(wù)，則應(yīng)以控件的 objectName 建立觸發(fā)信號(hào)與槽函數(shù)的連接。例如：

    # 通過 connect 建立信號(hào)/槽連接，點(diǎn)擊按鈕事件發(fā)射 triggered 信號(hào)，執(zhí)行相應(yīng)的子程序 click_pushButton
    self.pushButton_6.clicked.connect(self.click_pushButton_6)  # 點(diǎn)擊按鈕 "上一張" 觸發(fā)
    self.pushButton_7.clicked.connect(self.click_pushButton_7)  # 點(diǎn)擊按鈕 "下一張" 觸發(fā)
    self.pushButton_8.clicked.connect(self.click_pushButton_8)  # 點(diǎn)擊按鈕 "返回" 觸發(fā)

需要特別提醒的是：堆疊布局的每個(gè)頁(yè)面中的各個(gè)控件都是相互獨(dú)立的不同的控件，具有不同的控件名稱 objectName。

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

從 QtDesigner 可以清楚地看到所有控件名稱及隸屬關(guān)系?！皊tackedWidget” 堆疊布局頁(yè)面 “page_0” 中的按鈕控件 “上一張”、“下一張”、“返回”，objectName 分別是 pushButton_6、pushButton_7、pushButton_8；而頁(yè)面 “page_1” 中的按鈕控件 “上一張”、“下一張”、“返回”，objectName 分別是 pushButton_9、pushButton_10、pushButton_11。

4. 程序運(yùn)行圖

先上兩張程序運(yùn)行結(jié)果圖。

我們的圖形窗口如圖所示，看起來已經(jīng)有模有樣了。

以上就是Python編程PyQt5項(xiàng)目實(shí)戰(zhàn)窗口切換的堆疊布局示例詳解的詳細(xì)內(nèi)容，更多關(guān)于PyQt5項(xiàng)目實(shí)戰(zhàn)項(xiàng)目的堆疊布局的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論