本文详解如何通过自定义 QTabBar 与手动组合 QStackedWidget，构建一个左侧垂直标签栏可鼠标拖拽调整宽度、右侧独立显示内容的灵活 Tab 界面，彻底规避 QTabWidget 内置标签占位导致的布局冲突。
本文详解如何通过自定义 `qtabbar` 与手动组合 `qstackedwidget`，构建一个左侧垂直标签栏可鼠标拖拽调整宽度、右侧独立显示内容的灵活 tab 界面，彻底规避 `qtabwidget` 内置标签占位导致的布局冲突。
在标准 QTabWidget 中，标签栏（QTabBar）与内容区域（QStackedWidget）深度耦合——即使将标签设为 West（左侧），其内部仍会为标签预留不可见空间，导致无法真正分离布局或自由控制标签栏尺寸。要实现如图所示的「鼠标拖动分割线调节左侧标签栏宽度」效果，必须绕过 QTabWidget 的封装逻辑，采用组件解耦 + 手动信号绑定的方式重构。
核心思路是：
✅ 完全弃用 QTabWidget，改用独立的 VTabBar（继承自 QTabBar）负责标签渲染与交互；
✅ 使用 QStackedWidget 单独管理页面内容；
✅ 通过 currentChanged 信号同步标签切换与内容显示；
✅ 将 VTabBar 和 QStackedWidget 分别放入 QSplitter 的左右面板，天然支持鼠标拖拽缩放。
以下为关键实现要点：
1. 自定义垂直标签栏 VTabBar
需重写 tabSizeHint() 实现尺寸转置，并在 paintEvent() 中完成 90° 旋转绘制。注意：若启用关闭按钮（setTabsClosable(True)），还需手动修正关闭按钮位置，否则其会错位到顶部或底部：
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().transposed()
r = QtCore.QRect(QtCore.QPoint(), s).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() - 20,
tab_rect.y() + tab_rect.height() // 2
)
close_btn = self.tabButton(i, QtWidgets.QTabBar.RightSide)
if close_btn:
close_btn.setGeometry(QtCore.QRect(btn_center - btn_size//2, btn_size))
painter.restore()
2. 构建解耦式 DividedTabWidget
该类不继承 QTabWidget，而是聚合 VTabBar 与 QStackedWidget，并桥接二者行为：
-
tabBar()和stackedWidget()提供对外访问接口； -
addTab()/insertTab()同时向VTabBar添加标签、向QStackedWidget插入控件； -
currentChanged信号直接驱动QStackedWidget.setCurrentIndex； -
tabCloseRequested信号统一处理标签移除（注意：需先删QStackedWidget中 widget，再删VTabBar标签，避免索引错乱）。
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)
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 tabBar(self): return self.__tabBar
def stackedWidget(self): return self.__stack
def addTab(self, widget, label):
idx = self.__stack.addWidget(widget)
self.__tabBar.addTab(label)
return idx
def removeTab(self, index):
if 0 <h3>3. 布局集成：<code>QSplitter</code> 是最佳选择</h3><p>将 <code>VTabBar</code> 放入左侧面板（可添加按钮等扩展控件），<code>QStackedWidget</code> 放入右侧面板。<code>QSplitter</code> 自动提供可拖拽分隔条，且支持 <code>setSizes()</code> 精确控制初始比例：</p><pre class="brush:php;toolbar:false;">splitter = QtWidgets.QSplitter(QtCore.Qt.Horizontal)
# 左侧：标签栏容器
left_panel = QtWidgets.QWidget()
left_layout = QtWidgets.QVBoxLayout(left_panel)
left_layout.setContentsMargins(0, 0, 0, 0)
left_layout.addWidget(tab_widget.tabBar())
# 可选：添加“+”按钮
add_btn = QtWidgets.QPushButton("+")
add_btn.clicked.connect(lambda: tab_widget.addTab(QtWidgets.QLabel("New"), "New"))
left_layout.addWidget(add_btn)
splitter.addWidget(left_panel)
# 右侧：内容区
splitter.addWidget(tab_widget.stackedWidget())
# 设置初始宽度比例（例如 20% 标签栏，80% 内容区）
splitter.setSizes([150, 600]) # 绝对像素值更稳定⚠️ 注意事项与优化建议
-
尺寸策略：
VTabBar应设为QSizePolicy.Fixed（宽）+Expanding（高），确保其宽度固定、高度随标签数伸展；QStackedWidget则保持默认Expanding/Expanding。 -
响应式更新：若动态增删标签，建议调用
tabBar().updateGeometry()触发重排。 -
样式定制：可通过
QProxyStyle或QSS（如QTabBar::tab { min-width: 120px; }）进一步美化垂直标签外观。 -
性能提示：大量标签时，避免在
paintEvent中重复创建QStyleOptionTab实例，可复用对象。
此方案彻底摆脱了 QTabWidget 的内部约束，赋予开发者对标签栏尺寸、位置、交互的完全控制权，是构建专业级可配置界面的推荐实践。
