單式狀態欄，位于于窗口的左右側邊，可以實現軟件功能或目錄的導航。
本文詳細介紹用 QTreeWidget 部件實現目錄結構的折疊側邊欄，與用 QToolBox 部件實現垂直菜單結構的折疊側邊欄，通過案例帶小白建立兩種典型的折疊側邊欄。
至此，我們已經完成了一個比較完整的應用程序的 UI 和程序框架。

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

---

1. 折疊側邊欄

1.1 什么是折疊側邊欄

布局管理就是管理圖形窗口中各個部件的位置和排列。前文中我們不僅介紹了基本的水平布局、垂直布局、柵格布局、表格布局和進階的嵌套布局和容器布局，而且著重介紹了通過堆疊布局實現多個不同圖形頁面面的切換，以適應不同的任務場景。

折疊側邊欄在實際項目中也非常實用，可以實現軟件功能或目錄的導航。

折疊側邊欄，是指可折疊的多級菜單式狀態欄，位于于窗口的左右側邊。

折疊側邊欄也稱為垂直多級菜單，因此其外觀、功能與操作與菜單欄基本相似。

折疊側邊欄通常只展開第一級目錄（根目錄）的內容，可以顯示文本、圖標和按鍵，點擊上一級目錄可以展開或折疊下一級的目錄。點擊最底層目錄可以完成指定的操作，如執行所連接的槽函數。

折疊側邊欄的形式多樣，如網站導航、資源管理器的目錄形式，或手風琴形式、滑動菜單形式、按鍵列表形式。

1.2 折疊側邊欄的實現方案

折疊側邊欄的形式多樣，如瀏覽器、資源管理器的目錄形式，或多級菜單形式，或按鍵列表形式。

QtDesigner 提供了多種部件，可以實現不同形式的折疊側邊欄。

樹結構部件 Tree View 和 Tree Widget 可以建立目錄樹結構的側邊欄，二者分別基于模型（Model）和項目（Item）， Tree Widget 是 Tree View 的子類。

抽屜結構部件 ToolBox 是一種容器布局控件，可以建立菜單形式或按鍵列表形式的側邊欄。

---

2. 目錄結構的折疊側邊欄

目錄結構的折疊側邊欄的外觀和使用類似于資源管理器中的目錄管理。

2.1 QTreeWidget 部件的創建和設置

使用 QtDesigner 建立目錄結構的折疊側邊欄的步驟如下：

• （1）以上文 uiDemo8.ui 為基礎，在圖形窗口的左側創建一個垂直布局器 leftLayout，在圖形窗口的中間和右側創建一個堆疊布局器 stackedWidget。堆疊布局的頁面布局和設計詳見上文，本文不作贅述。
• （2）在 QtDesigner 左側工具欄 “ItemWidgets” 類中，選擇樹窗口部件 “Tree Widget”，將其拖動至垂直布局器 leftLayout 中，就創建一個樹窗口部件，將部件名（objectName）設為 “treeWidget”。
• （3）樹窗口部件 “treeWidget” 的屬性編輯：
  • 樹窗口部件 “treeWidget” 的大小、位置屬性編輯與其它控件類似，選中后可以用鼠標拖動拉伸，或在屬性編輯器中修改；
  • 鼠標選中樹結構控件 “treeWidget”，右鍵喚出下拉菜單，選擇 “編輯項目”，彈出 “編輯樹窗口部件” 對話框；
  • 對話框中 “列?” 選項：“treeWidget” 可以設置一列或多列，本例中只需要設置一列，編輯列名，如：“章節目錄”；
  • 對話框中 “項目(I)” 選項：通過對話框左下方的按鈕添加具體的目錄信息，其中 “+” 用于添加項目，"-" 用于刪除項目，“L+” 用于建立并添加下一級的目錄信息。編輯完成后點擊 “OK” 保存。

本例中樹窗口部件 “treeWidget” 的屬性編輯狀態如下圖所示。

2.2 QTreeWidget 側邊欄的信號/槽連接

上節在圖形界面中創建了樹窗口部件 “treeWidget”。在 QtDesigner 中可以通過 “預覽”（Ctrl+R）功能預覽應用程序的窗口效果。

在應用程序中的圖形窗口中，默認顯示根目錄層級信息，不顯示次級目錄的信息。帶有下級目錄的項目，其左側有一個 “>” 符號。鼠標點擊目錄選項前的三角符號，將展開其下一級目錄的內容。

通常我們希望用戶在點擊側邊欄的目錄項目時，應用程序能自動執行該項目的操作，這就需要通過編程實現信號/槽的連接。

對樹窗口部件 “treeWidget”，可以將鼠標單擊或雙擊作為觸發信號連接到槽函數。例如，點擊樹窗口部件的目錄項 item 時觸發信號 itemClicked，執行自定義的槽函數 click_treeWidget()。

注意 itemClicked(QTreeWidgetItem*,int) 中的參數 int 不可缺少，即使不使用參數也必須傳入，因此自定義槽函數 click_treeWidget() 定義時必須帶有該參數，否則程序報錯。

但是，樹窗口部件 “treeWidget” 是以其整體作為一個控件，不能將目錄中每一個項目（item）的鼠標單擊或雙擊作為觸發信號連接到一個槽函數，進而執行每個項目各自定義的功能操作。因此，需要在槽函數中判別鼠標所點擊的當前項 currentItem，然后再分別執行對應的操作。

具體地，使用 self.treeWidget.currentItem() 可以獲得當前項 Item，也可以通過 itemClicked() 傳入的參數獲得當前項 Item。參見如下例程：

# 建立信號/槽連接，點擊按鈕事件發射 triggered 信號，執行相應的槽函數 # self.treeWidget.clicked.connect(self.onTreeClicked) self.treeWidget.itemClicked.connect(self.click_treeWidget)def click_treeWidget(self, item, column): # 點擊 treeWidget 觸發# item = self.treeWidget.currentItem()print('key = {}\tvalue = {}'.format(item.text(0), item.text(1)))

本段例程中的槽函數所執行的任務是，顯示鼠標點擊的當前項 item 的文本 “item.text(0)” ，以示范如何判別鼠標所點擊的當前項 Itme。如果希望完成其它任務，可以將 item 作為索引參數，觸發信號連接對應的任務處理槽函數，或者直接調用對應的任務處理子程序。

2.3 QTreeWidget 側邊欄的應用程序

本節給出 QTreeWidget 側邊欄的主程序 GUIdemo10.py，包括建立信號/槽連接的程序。

GUIdemo10.py 所調用的 uiDemo10.py，是上節中在 PyDesigner 設計的圖形界面 uiDemo.ui，通過 PyUIC 轉化而生成的。

本例程在左下方文本框內顯示了鼠標點擊的當前項 currentItem 的文本內容，示范可以由此獲得當前項 Item。鼠標每點擊一次/一個樹窗口部件 “treeWidget” 中的目錄項，都會觸發槽函數獲得當前項 Item，并在程序窗口的左下方的文本框中顯示相應的目錄項文本。

如果需要在點擊目錄時執行其它操作，那就接著編出其它操作的程序實現吧。

# GUIdemo10.py # Demo10 of GUI by PyQt5 (treeWidget) # Copyright 2021 youcans, XUPT # Crated：2021-10-20import sys, math, sip from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox from uiDemo10 import Ui_MainWindow # 導入 uiDemo10.py 中的 Ui_MainWindow 界面類class MyMainWindow(QMainWindow, Ui_MainWindow): # 繼承 QMainWindow 類和 Ui_MainWindow 界面類def __init__(self, parent=None):super(MyMainWindow, self).__init__(parent) # 初始化父類self.setupUi(self) # 繼承 Ui_MainWindow 界面類self.treeWidget.itemClicked.connect(self.click_treeWidget) # 點擊 treeWidget 觸發def click_treeWidget(self, item, column): # 點擊 treeWidget 觸發# item = self.treeWidget.currentItem() # 獲得當前項 Item# if item != None: # 根據 item 選擇執行其它操作print('key = {}\tvalue = {}'.format(item.text(0), item.text(1)))self.plainTextEdit.appendPlainText("Click: treeWidget")self.plainTextEdit.appendPlainText(" key ：{}".format(item.text(0)))if __name__ == '__main__':app = QApplication(sys.argv) # 在 QApplication 方法中使用，創建應用程序對象myWin = MyMainWindow() # 實例化 MyMainWindow 類，創建主窗口myWin.show() # 在桌面顯示控件 myWinsys.exit(app.exec_()) # 結束進程，退出程序

---

3. 垂直菜單結構折疊側邊欄

垂直菜單結構的折疊側邊欄類似于多級菜單管理，可以實現手風琴、滑動菜單、按鍵列表形式的側邊欄。

3.1 QToolBox 部件的創建和設置

使用 QtDesigner 建立垂直菜單結構的折疊側邊欄的步驟如下：

• （1）以上文 uiDemo8.ui 為基礎，在圖形窗口的左側創建垂直菜單結構的折疊側邊欄，在圖形窗口的中間和右側創建一個堆疊布局器 stackedWidget。堆疊布局的頁面布局和設計詳見上文，本文不作贅述。
• （2）在 QtDesigner 左側工具欄 “Containers” 類中，選擇抽屜部件 “Tool Box”，將其拖動至圖形窗口的左側的適當位置，就創建一個垂直菜單部件，將部件名（objectName）設為 “toolBox”。
  • 新建的垂直菜單部件 “toolBox” 中建立了兩個菜單形狀的頁面，顯示為 “Page 1”、“Page 2”，相當于一級菜單的顯示內容；
  • 添加菜單頁面：鼠標選中垂直菜單部件 “toolBox”，右鍵喚出下拉菜單，選擇 “插入頁” ->“在當前頁之后/前”，可以插入菜單頁面；
  • 整理菜單頁面：鼠標選中垂直菜單部件 “toolBox”，右鍵喚出下拉菜單，選擇 “頁 *” 可以刪除菜單頁面，選擇 “改變頁次序” 可以喚出對話框改變各頁面的順序；
  • 切換當前菜單項：在編輯或使用狀態下，都可以點擊每個菜單項而將其切換為當前項。當前項的下方有一塊空白區域可以插入下級菜單或控件，而非當前項的菜單欄是折疊的。
• （3）垂直菜單部件 “toolBox” 的屬性編輯：
  • 垂直菜單部件 “toolBox” 的大小、位置屬性編輯與其它控件類似，選中后可以用鼠標拖動拉伸，或在屬性編輯器中修改；
  • 鼠標選中垂直菜單部件 “toolBox”，點擊 “Page 1” 后從 QtDesigner 右側的 “屬性編輯器” 中找到 QToolBox -> currentItemName 可以修改當前項 “Page 1” 的 objectName（該屬性不是所顯示的文本內容，不支持中文）、QToolBox -> currentItemText 修改當前項 “Page 1” 的顯示內容（支持中文）；
  • 類似地，鼠標選中垂直菜單部件 “toolBox”，點擊 “Page 2”、… 后可以在 QtDesigner 右側的 “屬性編輯器” 中修改當前項 “Page 2”、… 的 objectName 及顯示內容 “currentItemText”；
• （4）創建下級菜單控件：
  • 垂直菜單部件 “toolBox” 只建立一級菜單（根目錄），并不建立下級菜單；
  • 建立下級菜單控件：點擊 “toolBox” 中的菜單項將其切換為當前項，當前項的下方出現一塊空白區域，在該空白區域內可以自由添加布局、容器或控件。
  • 本例中向 “toolBox” 中的每個菜單項添加一個垂直布局器（Vertical Layout），再向該垂直布局器中插入一個或多個按鍵控件（Push Button）作為二級菜單。

上述的創建垂直菜單部件和二級菜單控件的步驟如下圖所示：

3.2 QToolBox 側邊欄的信號/槽連接

上節所建立垂直菜單結構的折疊側邊欄，可折疊的一級菜單是由抽屜部件 “Tool Box” 實現的，而二級菜單是由一組按鍵控件 “Push Button” 實現的。

如同堆疊布局各頁面中的每個按鍵控件是相互獨立的不同的控件，垂直菜單結構中的二級菜單按鍵控件也都是相互獨立的不同的控件。這些控件必須具有唯一的 objectName，但可以具有相同的顯示內容 “Button Text”。換句話說，在不同的一級菜單項下可能會出現相同顯示內容的按鍵控件，但將被定義為不同 objectName 的按鍵控件。

由于這種垂直菜單結構的二級菜單都是獨立的按鍵控件，因此建立信號/槽連接的方法，與圖形界面中的普通控件的操作是相同的。既可以在 QtDesigner 中編輯建立信號/槽連接，也可以在 Python 程序中通過編程實現。

在 QtDesigner 中編輯建立信號/槽連接的方法，詳見 Python 小白從零開始 PyQt5 項目實戰（3）信號與槽的連接，結果如下圖所示。

在 Python 程序中編程實現二級菜單按鍵控件的信號/槽連接的例程如下，將 QtDesigner 建立的 UI 設計文件轉換為 .py 后也可以得到該程序。

# 建立信號/槽連接，點擊按鈕事件執行相應的子程序 click_pushButtonself.actionQuit.triggered.connect(MainWindow.close)self.actionHelp.triggered.connect(MainWindow.trigger_actHelp)self.pushButton_01.clicked.connect(MainWindow.click_pushButton_01)self.pushButton_02.clicked.connect(MainWindow.click_pushButton_02)self.pushButton_03.clicked.connect(MainWindow.click_pushButton_03)self.pushButton_04.clicked.connect(MainWindow.click_pushButton_04)self.pushButton_05.clicked.connect(MainWindow.click_pushButton_05)self.pushButton_06.clicked.connect(MainWindow.click_pushButton_06)self.pushButton_07.clicked.connect(MainWindow.click_pushButton_07)self.pushButton_08.clicked.connect(MainWindow.click_pushButton_08)self.pushButton_09.clicked.connect(MainWindow.click_pushButton_09)self.pushButton_10.clicked.connect(MainWindow.click_pushButton_10)

對二級菜單按鍵控件建立了信號/槽連接，就可以在相應的槽函數執行所需的各種操作，而不需要任何判別或控制程序。

當然，如果執行的操作需要使用窗口中的堆疊布局，仍然需要進行堆疊窗口控件的頁面控制，以選擇所需的任務場景，但這與側邊欄的菜單選項無關。

垂直菜單結構的折疊側邊欄的程序圖形窗口如下圖所示。至此，我們已經完成了一個比較完整的應用程序的 UI 和程序框架。

3.3 QToolBox 側邊欄的應用程序

以下是主程序完整的例程，略去了部分操作的子程序，并不影響側邊欄的菜單折疊和切換功能。

# GUIdemo11.py # Demo11 of GUI by PyQt5 # Copyright 2021 youcans, XUPT # Crated：2021-10-20import sys, math, sip import numpy as np # 導入 numpy 并簡寫成 npfrom PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBox from uiDemo11 import Ui_MainWindow # 導入 uiDemo9.py 中的 Ui_MainWindow 界面類class MyMainWindow(QMainWindow, Ui_MainWindow): # 繼承 QMainWindow 類和 Ui_MainWindow 界面類def __init__(self, parent=None):super(MyMainWindow, self).__init__(parent) # 初始化父類self.setupUi(self) # 繼承 Ui_MainWindow 界面類def click_pushButton_01(self): # 點擊 pushButton_01 觸發self.lineEdit.setText("1. 幾何變換")self.plainTextEdit.appendPlainText("1.1 圖像平移")self.stackedWidget.setCurrentIndex(0) # 打開 stackedWidget > page_0self.label_1.setPixmap(QtGui.QPixmap("../image/fractal01.png"))returndef click_pushButton_02(self): # 點擊 pushButton_02 觸發......def click_pushButton_10(self): # 點擊 pushButton_10 觸發...if __name__ == '__main__':app = QApplication(sys.argv) # 在 QApplication 方法中使用，創建應用程序對象myWin = MyMainWindow() # 實例化 MyMainWindow 類，創建主窗口myWin.show() # 在桌面顯示控件 myWinsys.exit(app.exec_()) # 結束進程，退出程序

---

4. 項目總結

在本系列中，我們從 PyQt5 的安裝開始，先后介紹了基本應用：菜單和工具欄、基本控件，核心機制：信號與槽連接、高級應用：布局管理、窗口切換和折疊側邊欄，并通過項目實戰案例介紹各種應用的詳細操作過程，給出相關例程。

PyQt5 的體系龐大復雜，可以創造豐富多彩的圖形界面。作者也是初學乍練，以實戰過程為小白解說分享。對于 Python 小白來說，通過本系列的學習，可以初步掌握和快速建立一個較為完整和通用的圖形界面程序框架。

本系列的內容到此就暫告一段落。

下一篇文章是本系列全文匯總，并給出通用圖形界面程序框架的完整例程，可以為小白提供一個設計模板。有需要的朋友，請在文后評論區留言。

【本節完】

版權聲明：

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

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

Copyright 2021 youcans, XUPT

Crated：2021-10-20

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

總結

以上是生活随笔為你收集整理的Python 小白从零开始 PyQt5 项目实战（7）折叠侧边栏的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。