本文详解如何通过自定义 QTabBar 与 QStackedWidget 组合，构建一个标签栏（垂直排列、左侧显示）与内容区完全分离、且支持鼠标拖拽调节宽度的 Tab 控件，彻底规避 QTabWidget 内置布局对 tabBar 占位的限制。
本文详解如何通过自定义 `qtabbar` 与 `qstackedwidget` 组合，构建一个标签栏（垂直排列、左侧显示）与内容区完全分离、且支持鼠标拖拽调节宽度的 tab 控件，彻底规避 `qtabwidget` 内置布局对 tabbar 占位的限制。
在 Qt 中，QTabWidget 默认将 QTabBar 作为其内部子部件，并为其预留固定空间（即使设置为 West 方向），导致无法真正“抽离”标签栏进行独立布局或自由缩放。直接继承并重写 paintEvent 或尝试修改 QTabWidget 的尺寸策略均难以根治此问题——因为其底层布局逻辑强制保留 tabBar 区域。因此，最佳实践是绕过 QTabWidget，采用组合式架构：用独立的 VTabBar + QStackedWidget 替代原生组件，实现完全解耦与精细控制。
以下是一个完整、健壮的实现方案：
✅ 核心组件说明
-
VTabBar：继承QTabBar，重写tabSizeHint()实现垂直尺寸适配，并在paintEvent()中完成 90° 旋转绘制；同时修复关闭按钮（×）位置，确保其在垂直标签下仍可精准点击。 -
DividedTabWidget：自定义容器类，不继承QTabWidget，而是聚合VTabBar和QStackedWidget，通过信号连接（currentChanged→setCurrentIndex）保持同步，并提供addTab/removeTab等兼容接口。
✅ 关键代码实现（含注释）
import sys
from PySide2 import QtWidgets, QtCore, QtGui
class VTabBar(QtWidgets.QTabBar):
def tabSizeHint(self, index):
s = super().tabSizeHint(index)
s.transpose() # 将宽高互换，适配垂直方向
return s
def paintEvent(self, event):
painter = QtWidgets.QStylePainter(self)
opt = QtWidgets.QStyleOptionTab()
for i in range(self.count()):
self.initStyleOption(opt, i)
# 绘制标签背景形状（如圆角矩形）
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabShape, opt)
painter.save()
# 旋转绘制文字：先计算旋转后矩形，再平移+旋转
s = opt.rect.size()
s.transpose()
r = QtCore.QRect(QtCore.QPoint(), s)
r.moveCenter(opt.rect.center())
opt.rect = r
c = self.tabRect(i).center()
painter.translate(c)
painter.rotate(90)
painter.translate(-c)
painter.drawControl(QtWidgets.QStyle.CE_TabBarTabLabel, opt)
# 【关键】修复关闭按钮位置（适配垂直标签）
if self.tabsClosable():
tab_rect = self.tabRect(i)
btn_size = QtCore.QSize(12, 12)
# 将关闭按钮置于标签右端中部（视觉上“右侧”，实为垂直标签的“底部边缘内侧”）
btn_center = QtCore.QPoint(
tab_rect.x() + tab_rect.width() - 16,
tab_rect.y() + tab_rect.height() // 2
)
btn_rect = QtCore.QRect(btn_center - btn_size // 2, btn_size)
close_btn = self.tabButton(i, QtWidgets.QTabBar.RightSide)
if close_btn:
close_btn.setGeometry(btn_rect)
painter.restore()
class DividedTabWidget(QtWidgets.QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.__tabBar = VTabBar()
self.__tabBar.setShape(QtWidgets.QTabBar.RoundedWest) # 左侧圆角样式
self.__tabBar.setTabsClosable(True)
# 固定宽度策略，便于 splitter 拖拽时稳定缩放
self.__tabBar.setSizePolicy(
QtWidgets.QSizePolicy.Fixed,
QtWidgets.QSizePolicy.Expanding # 高度随内容撑开
)
self.__stack = QtWidgets.QStackedWidget()
# 同步切换逻辑
self.__tabBar.currentChanged.connect(self.__stack.setCurrentIndex)
self.__tabBar.tabCloseRequested.connect(self.removeTab)
def stackedWidget(self):
return self.__stack
def tabBar(self):
return self.__tabBar
def addTab(self, widget, label):
if not widget:
return -1
idx = self.__stack.addWidget(widget)
self.__tabBar.addTab(label)
return idx
def insertTab(self, index, widget, label):
if not widget:
return -1
idx = self.__stack.insertWidget(index, widget)
self.__tabBar.insertTab(index, label)
return idx
def removeTab(self, index):
self.__tabBar.removeTab(index)
# 安全移除：先获取 widget，再从 stacked 中移除
widget = self.__stack.widget(index)
if widget:
self.__stack.removeWidget(widget)
widget.deleteLater()
✅ 主窗口集成（使用 QSplitter 实现鼠标拖拽边框）
def main():
app = QtWidgets.QApplication(sys.argv)
mainwin = QtWidgets.QMainWindow()
splitter = QtWidgets.QSplitter(QtCore.Qt.Horizontal)
# 左侧面板：仅含 tabBar + 可选控件（如添加标签按钮）
left_panel = QtWidgets.QWidget()
left_layout = QtWidgets.QVBoxLayout(left_panel)
left_layout.setContentsMargins(0, 0, 0, 0)
left_layout.setSpacing(4)
tab_widget = DividedTabWidget()
tab_widget.addTab(QtWidgets.QLabel("First tab"), "First tab")
tab_widget.addTab(QtWidgets.QLabel("Second tab"), "Second tab")
tab_widget.addTab(QtWidgets.QLabel("Third tab"), "Third tab")
add_btn = QtWidgets.QPushButton("✚ Add Tab")
add_btn.clicked.connect(lambda: tab_widget.addTab(QtWidgets.QLabel("New"), "New"))
left_layout.addWidget(add_btn)
left_layout.addWidget(tab_widget.tabBar())
# 右侧面板：仅 stacked widget 内容区
right_panel = tab_widget.stackedWidget()
splitter.addWidget(left_panel)
splitter.addWidget(right_panel)
# 【重要】设置初始尺寸比例，确保标签栏宽度合理（单位：像素）
splitter.setSizes([180, 600]) # 左侧默认 180px，右侧自适应
mainwin.setCentralWidget(splitter)
mainwin.resize(1000, 600)
mainwin.show()
sys.exit(app.exec_())
if __name__ == "__main__":
main()
⚠️ 注意事项与优化建议
-
宽度一致性：由于
VTabBar使用Fixed宽度策略，QSplitter拖拽时其宽度会实时变化，但标签文字可能因长度不同导致视觉不齐。解决方案是统一设置tabBar().setMinimumWidth(N)并配合setFont()控制字号，或在tabSizeHint()中返回统一宽度（如s.setWidth(160)）。 -
样式定制：可通过
QProxyStyle或QSS进一步美化VTabBar（例如设置QTabBar::tab { min-width: 160px; }），但需注意旋转后 CSS 属性映射逻辑。 -
性能考量：大量标签（>50）时，
paintEvent中逐个绘制可能轻微卡顿，可考虑启用setUpdatesEnabled(False)批量更新，或改用QGraphicsView架构（进阶场景）。 -
无障碍支持：手动实现的 tabBar 需额外调用
setAccessibleName()和setAccessibleDescription()以满足辅助工具要求。
该方案彻底摆脱了 QTabWidget 的布局束缚，赋予开发者对标签栏尺寸、位置、交互和样式的完全掌控权，是构建专业级可伸缩界面组件的推荐范式。
