PyQt6 优化操作：建立侧边栏，要求可拖拽改变宽度，可用按钮控制侧边栏的展开和收起

1. 官方文档

QSplitter — PyQt Documentation v6.6.0

2. 效果展示

• 可拖拽改变宽度比例

• 点击按钮快速收起或展开侧边栏

点击按钮，侧边栏收起，同时按钮图标变为向左箭头 (对应展开功能)，再次点击按钮，侧边栏展开，同时按钮图标改变为向右箭头 (对应收起功能)。

3. 代码细节说明

3.1. 控件拉伸布局：QSplitter 

3.1.1  Qt Designer中如何添加QSplitter

在 Qt Designer 的控件工具箱中没有 QSplitter 这个控件

添加 QSplitter 步骤

1、同时选中需要被添加到 QSplitter 分割器中的控件 (需要同时选中)

2、鼠标右键 --> 布局 --> 使用分裂器水平/垂直布局

也可以使用工具栏中的 <使用分裂器水平/垂直布局> 工具

3.1.2 QSplitter 常用方法

(默认) self.splitter.setChildrenCollapsible(True) 效果：

尽可能的拖拽到最右侧，右边的部件将不显示。

self.splitter.setChildrenCollapsible(False) 效果：

即便拖拽到最右侧，右边的部件也能够显示一块内容。

self.splitter.setHandleWidth(20) 执行结果：

self.splitter.setOrientation(Qt.Orientation.Vertical) 执行结果：

3.2. 私有布局

私有布局（Private Layout）是一种基于 QWidget 的布局方式，可以在 QWidget 中添加子控件，并自动排列它们。与其他布局方式不同的是，私有布局是在 QWidget 的私有部分中实现的，因此只能在 QWidget 中使用，而不能在其他的控件中使用。 私有布局的优点是可以在 QWidget 中自由地布置和排列控件，而不必受到其他布局方式的限制。此外，私有布局还可以很好地处理控件之间的间距和边框等问题，能够实现更加灵活和精细的布局效果。私有布局的缺点是需要手动管理控件的位置和大小，需要编写更多的代码来实现复杂的布局效果。

3.3 按钮控件 CSS

对于按钮控件，可使用 border:none; 不显示按钮的边框，同时可以使用 QPushButton:pressed，设置 padding-top 和 padding-bottom 实现点击按钮时按钮小幅跳动的效果，从而使点击操作更明显。

4. 代码分享

版本：PyQt6   --   6.6.1

4.1 下载左右箭头图标 .png 文件 

可参考：

PyQt：辅助网站收集 (图标、颜色)_python pyqt 漂亮的按钮图标哪里下载-CSDN博客

文件放置于 ico_files 文件夹：

│  sidebar.py
│  sidebar_main.py
│      
└─ico_files
        arrow_left.png
        arrow_right.png

4.2 Ui 界面 <sidebar.py>

# Form implementation generated from reading ui file 'sidebar.ui'
#
# Created by: PyQt6 UI code generator 6.6.1
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.
 
 
from PyQt6 import QtCore, QtGui, QtWidgets
 
 
class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(502, 317)
        self.centralwidget = QtWidgets.QWidget(parent=MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.horizontalLayout = QtWidgets.QHBoxLayout(self.centralwidget)
        self.horizontalLayout.setObjectName("horizontalLayout")
        self.splitter = QtWidgets.QSplitter(parent=self.centralwidget)
        self.splitter.setOrientation(QtCore.Qt.Orientation.Horizontal)
        self.splitter.setHandleWidth(0)
        self.splitter.setChildrenCollapsible(True)
        self.splitter.setObjectName("splitter")
        self.frame_2 = QtWidgets.QFrame(parent=self.splitter)
        self.frame_2.setStyleSheet("")
        self.frame_2.setFrameShape(QtWidgets.QFrame.Shape.StyledPanel)
        self.frame_2.setFrameShadow(QtWidgets.QFrame.Shadow.Raised)
        self.frame_2.setObjectName("frame_2")
        self.verticalLayout_2 = QtWidgets.QVBoxLayout(self.frame_2)
        self.verticalLayout_2.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout_2.setSpacing(0)
        self.verticalLayout_2.setObjectName("verticalLayout_2")
        self.tabWidget = QtWidgets.QTabWidget(parent=self.frame_2)
        self.tabWidget.setStyleSheet("background-color: rgb(240, 240, 240);")
        self.tabWidget.setObjectName("tabWidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.tabWidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.tabWidget.addTab(self.tab_2, "")
        self.verticalLayout_2.addWidget(self.tabWidget)
        self.frame = QtWidgets.QFrame(parent=self.splitter)
        self.frame.setStyleSheet("background-color: rgb(255, 170, 0);")
        self.frame.setFrameShape(QtWidgets.QFrame.Shape.StyledPanel)
        self.frame.setFrameShadow(QtWidgets.QFrame.Shadow.Raised)
        self.frame.setObjectName("frame")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.frame)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setSpacing(0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.groupBox = QtWidgets.QGroupBox(parent=self.frame)
        self.groupBox.setObjectName("groupBox")
        self.verticalLayout.addWidget(self.groupBox)
        self.horizontalLayout.addWidget(self.splitter)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(parent=MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 502, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(parent=MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
 
        self.retranslateUi(MainWindow)
        self.tabWidget.setCurrentIndex(0)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
 
    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "Tab 1"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "Tab 2"))
        self.groupBox.setTitle(_translate("MainWindow", "GroupBox"))

4.3 主程序 <sidebar_main.py>

from PyQt6.QtCore import Qt
from PyQt6.QtGui import QIcon, QPixmap
from PyQt6.QtWidgets import QApplication, QMainWindow, QPushButton, QHBoxLayout
import sys
import sidebar
import os
 
 
class Ui_overlap(sidebar.Ui_MainWindow, QMainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.splitter.setSizes([self.width() // 10 * 7, self.width() // 10 * 3])
        self.splitter.setHandleWidth(0)
        self.pushButton_expend = QPushButton(self.splitter.widget(0))
        self._prepare_ptn_expend()
        self.show()
 
    def _prepare_ptn_expend(self):
        # 设置大小、图标、功能
        self.pushButton_expend.resize(30, 30)
        self.pushButton_expend.setIcon(QIcon(QPixmap(
            os.path.abspath(os.path.join(os.path.dirname(__file__), 'ico_files', 'arrow_right.png')))))
        self.pushButton_expend.clicked.connect(self.adjust_sidebar)
        # 设置位置
        btne_hlayout = QHBoxLayout(self.tabWidget)
        btne_hlayout.addWidget(self.pushButton_expend, 0, Qt.AlignmentFlag.AlignRight | Qt.AlignmentFlag.AlignTop)
        btne_hlayout.setSpacing(0)
        btne_hlayout.setContentsMargins(0, 0, 0, 0)
        # 设置按钮样式
        self.splitter.widget(0).setStyleSheet(
            "QPushButton{\n"
            "    border-top-left-radius:3px;\n"
            "    border-bottom-left-radius:3px;\n"
            # "    background-color: rgb(170, 255, 255);\n"
            "}\n"
            "QPushButton:pressed{\n"
            "    padding-left:5px;\n"
            "    padding-top:5px;\n"
            "\n"
            "}")
 
    def adjust_sidebar(self):
        path1 = os.path.abspath(os.path.join(os.path.dirname(__file__), 'ico_files', 'arrow_right.png'))
        path2 = os.path.abspath(os.path.join(os.path.dirname(__file__), 'ico_files', 'arrow_left.png'))
        icon_to_right = QIcon(QPixmap(path1))
        icon_to_left = QIcon(QPixmap(path2))
        if self.frame.isHidden():
            self.frame.show()
            self.pushButton_expend.setIcon(icon_to_right)
        else:
            self.frame.hide()
            self.pushButton_expend.setIcon(icon_to_left)
 
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    my_ui = Ui_overlap()
    sys.exit(app.exec())

参考链接

Qt中控件叠加悬浮显示的两种实现方法_qt 控件堆叠悬浮-CSDN博客

106.PyQt5_QSplitter_可拉伸区域分隔器控件_pyqt5 splitter-CSDN博客