为垂直QT/PyQt/PySide标签部件设置样式表的异常问题

核心问题修复 #

你遇到的选中标签显示异常，本质是默认QTabBar的样式表逻辑适配水平布局，垂直布局下宽高维度颠倒，导致绘制区域错位。直接交换样式表中的宽高属性即可解决核心问题，同时调整边框、圆角的方向适配垂直布局：

示例样式表修改：

/* 垂直左侧Tab的适配样式 */
QTabBar::tab {
    background-color: #eee;
    width: 32px;  /* 原水平Tab的height值，作为垂直Tab的厚度 */
    height: 110px; /* 原水平Tab的width值，作为垂直Tab的长度 */
    border: 1px solid #ddd;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

QTabBar::tab:selected {
    background-color: #ccc;
    border-right: none; /* 消除与内容面板的边框重叠 */
}

QTabWidget::pane {
    border: 1px solid #ddd;
    border-left: none; /* 与选中Tab的右侧对齐 */
}

自定义TabBar类优化 #

1. 重写尺寸提示，统一标签大小 #

避免样式表尺寸与实际渲染尺寸冲突，重写tabSizeHint方法，动态计算垂直布局下的标签尺寸：

#include <QTabBar>
#include <QFontMetrics>

class CustomTabBar : public QTabBar {
    Q_OBJECT
public:
    explicit CustomTabBar(QWidget *parent = nullptr) : QTabBar(parent) {}

    QSize tabSizeHint(int index) const override {
        // 用字体宽度计算标签长度，适配不同字体
        int textLength = fontMetrics().horizontalAdvance(tabText(index)) + 16;
        // 固定标签厚度，长度随文本自适应
        return QSize(32, textLength);
    }
};

2. 优化文本绘制逻辑 #

如果默认文本旋转显示有问题，重写paintEvent手动控制文本绘制，确保水平显示在垂直标签上：

#include <QStylePainter>
#include <QStyleOptionTab>

void CustomTabBar::paintEvent(QPaintEvent *event) {
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < count(); i++) {
        initStyleOption(&opt, i);
        painter.save();

        // 平移+旋转，让文本水平显示在垂直标签上
        QRect tabRect = tabRect(i);
        painter.translate(tabRect.center());
        painter.rotate(90); // 左侧垂直Tab用90度，右侧用-90度
        painter.translate(-tabRect.center());

        // 绘制标签文本
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }
}

3. 绑定布局形状 #

在构造函数中设置TabBar的形状，让Qt样式系统自动适配垂直布局的基础逻辑：

CustomTabBar::CustomTabBar(QWidget *parent) : QTabBar(parent) {
    setShape(QTabBar::RoundedWest); // 对应左侧垂直Tab，右侧用RoundedEast
}

整体代码优化要点 #

• 职责分离：自定义TabWidget仅负责整合TabBar和QStackedWidget，TabBar专注于标签渲染逻辑，避免代码耦合。
• 动态适配：用QFontMetrics计算文本尺寸，避免硬编码数值，适配不同字体和系统缩放。
• 样式集中管理：在TabWidget的构造函数中统一设置样式表，避免分散设置导致样式冲突。
• 边界处理：调整选中Tab与内容面板的边框重叠问题，保证视觉统一性。

内容的提问来源于stack exchange，提问作者NejoFS