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

目录

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;\
    }\

参考:

QTabBar样式设置-CSDN博客

去掉TabWidget标签栏顶部一条白线_qtabwidget tabbar上有横线-CSDN博客

QTabWidget的tab标签下边框怎么去掉-CSDN社区

--END--

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wyn_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值