【QT】设置QTabWidget样式：上、下边线的显示与去除

news2024/10/5 18:30:45

0.简介

1.环境

2.详细介绍

2.1我的原代码和显示效果

2.2 去掉QTabWidget的边框

2.3 单独留下边线

2.3.1 法一：通过【this->setDocumentMode(true);】设置下边线

2.3.2 通过【QTabWidget::pane】设置下边线

2.4单独设置上边线

2.5 优化界面tab

2.5.1 增加Tab的圆角

2.5.2 增加下边线的样式和颜色

2.5.3 设置Tab点击和不点击的突出效果

2.5.4 全部代码：

0.简介

项目需求，有一个QTabWidget的类，想修改其样式，主要介绍了如何去掉边框；单独留上边线、下边线；主要使用setStyleSheet设置，详见下文

1.环境

windows11 + vs-code + qt

2.详细介绍

2.1我的原代码和显示效果

我有一个自定义的类，这个类继承自【QTabWidget】

用setStyleSheet设置样式

    setStyleSheet("QTabBar::tab {\
        min-height:30px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
    }\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
    }");

界面显示的效果如下，可以看到我有两个tab页：管1和管2

但是我的QTabWidget目前的样式有个框，我的目的是删除QTabWidget的框，不美观

2.2 去掉QTabWidget的边框

使用【QTabWidget::pane{top:-1px;border:none;}】

在原有的样式中增加这句样式

    setStyleSheet("QTabBar::tab {\
        min-height:30px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
    }\
    QTabWidget::pane{top:-1px;\
        border:none;}\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
    }");

2.3 单独留下边线

有两种方式显示单独下边线：

①通过【setDocumentMode】设置；

②通过【QTabWidget::pane】设置。

不同的点是，前者不能设置线的样式，后者可以设置线的样式

2.3.1 法一：通过【this->setDocumentMode(true);】设置下边线

【setDocumentMode(true)】设置 QTabWidget 为文档模式，主要改变 QTabWidget 的外观和行为，使其更适合用于文档管理界面。文档模式通常用于显示一组文档，每个文档都可以通过一个标签进行访问。

这种模式下的 QTabWidget 具有以下特征：

标签外观改变：标签将变得更扁平，更类似于浏览器或文本编辑器中的标签。
标签位置：通常标签会被放置在控件的顶部，而不是其他位置（如左侧或右侧）。
交互性改进：文档模式的标签通常更易于操作和管理，提供更直观的文档切换体验。

优点

改进的用户体验：文档模式的标签设计通常更符合用户的期望，特别是在处理多个文档时，例如在代码编辑器或网页浏览器中。
外观一致性：当应用程序需要多文档界面时，文档模式提供了一种标准化的外观，使界面更一致。
简洁的标签样式：标签样式更扁平、更简洁，可以减少视觉干扰，提升用户的注意力集中在内容上。

缺点

灵活性降低：文档模式的设计主要是为了文档管理，如果应用程序的标签用途不同（例如选项卡式的设置面板），文档模式可能不太适合。
自定义难度增加：文档模式的标签外观和行为是固定的，如果需要进行特定的自定义，可能需要更多的工作。
兼容性问题：某些情况下，文档模式可能与应用程序的整体设计风格不匹配，导致视觉上的不协调。

    setStyleSheet("QTabBar::tab {\
        min-height:30px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
    }\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
    }");
    this->setDocumentMode(true);  //通过这行设置下边线

2.3.2 通过【QTabWidget::pane】设置下边线

前提：请设置文档模式为false【this->setDocumentMode(false);】，或者注释这行代码

我增加了一条绿色的线，设置宽度为2px

【QTabWidget::pane{border-top: 2px solid cyan;}】

    setStyleSheet("QTabBar::tab {\
        min-height:40px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
    }\
    QTabWidget::pane{border-top: 2px solid cyan;}\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
    }");
    // this->setDocumentMode(false);

2.4单独设置上边线

使用文档模式 + 【QTabWidget::pane{}】

注意：【QTabWidget::pane{}】这句是不能删除的，即使它的里面没有设置样式，去掉后就变成下边线了。

解释：

当你在样式表中明确声明 QTabWidget::pane{} 时，即使没有添加任何具体样式，它也会覆盖某些默认样式设置。这会导致 QTabWidget 的外观发生变化。在这种情况下，Qt默认的样式（如边框）可能会被去掉或修改。
当 QTabWidget::pane{} 不存在时，Qt将应用默认样式。默认样式通常会为面板添加一个下边线，这就是为什么你在去掉 QTabWidget::pane{} 后看到下边线。

    setStyleSheet("QTabBar::tab {\
        min-height:40px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
    }\
    QTabWidget::pane{}\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
    }");
    this->setDocumentMode(true);

2.5 优化界面tab

为了优化界面，我设置了tab的样式，增加了圆角，设置了下边线的颜色和透明度，设置了点击tab的突出显示，最后的显示和代码如下

前提：请注释文档模式的代码，或设置为false。

2.5.1 增加Tab的圆角

2.5.2 增加下边线的样式和颜色

2.5.3 设置Tab点击和不点击的突出效果

2.5.4 全部代码：

    setStyleSheet("QTabBar::tab {\
        min-height:40px;\
        min-width:100px;\
        font-size:22px;\
        font-family:'Microsoft YaHei';\
        background-color:rgb(225, 229, 232);\
        border-top-left-radius: 4px;\
        border-top-right-radius: 4px;\
    }\
    QTabWidget::pane{border-top: 2px solid rgba(10, 93, 201, 50);}\
    QTabBar::tab:selected{\
        background-color:#0A5DC9;\
        color:#ffffff;\
        padding-bottom: 5px;\
    }\
    QTabBar::tab:!selected{\
        margin-top: 3px;\
    }\