自定义QTabWidget时如何解决选中标签底部下划线无法覆盖问题

解决方案 #

代码不生效的核心原因是默认状态下QTabWidget::pane的绘制层级高于TabBar，导致pane的顶部边框会覆盖在Tab标签上方，仅设置负margin无法解决层级问题，按以下内容修改QSS代码即可：

核心修改点：

• 给Tab标签基础样式新增z-index属性设置基础层级
• 提升选中状态Tab的z-index数值，确保其绘制层级高于pane
• 将选中Tab的底部边框颜色修改为和Tab背景一致的白色，遮挡pane的顶部边框

完整修改后代码：

QTabWidget::pane { /* The tab widget frame */
        border-top: 1px solid #C2C7CB;
     padding:20px;
    }        
    QTabWidget::tab-bar {
        left: 2px; /* move to the right by 5px */           
    }
    QTabWidget{
        background-color:#ffffff;
    }
    /* Style the tab using the tab sub-control. Note that
        it reads QTabBar _not_ QTabWidget */
    QTabBar::tab {
        margin-left:4px;
        padding:4px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background:#ffffff;
        border:1px solid #d9d9d9;
        border-bottom:0px none;
        min-height:20px;
        z-index: 1; /* 新增基础层级 */
    }
    QTabBar::tab:selected {
        border-color: #9B9B9B;
        border-bottom-color: #ffffff; /* 修改为和Tab背景一致的白色 */
        margin-bottom:-1px;
        z-index: 2; /* 选中态提升层级，确保覆盖pane边框 */
    }

备用方案（如果上述方案不生效可使用）：

直接去掉QTabWidget::pane的border-top设置，改为给QTabBar设置底部边框，选中标签的负margin和白色底部边框会自然遮挡对应位置的线条：

/* 仅列出修改部分 */
QTabWidget::pane {
    border-top: none; /* 移除原顶部边框 */
    border: 1px solid #C2C7CB; /* 可根据需要保留其他方向边框 */
    padding:20px;
}
QTabBar {
    border-bottom: 1px solid #C2C7CB; /* 给TabBar整体加底部边框 */
}

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