使用样式表自定义 QTabWidget

Posted 2023-03-30

【中文标题】使用样式表自定义 QTabWidget

【英文标题】：Customuzing QTabWidget with Style Sheets

【发布时间】：2016-07-14 08:20:32

【问题描述】：

如何设置 QTabWidget 的样式，如下图所示。

问题是：如果我设置样式表

QTabWidget:pane 
border: 1px solid gray;

然后它看起来像这样：

【问题讨论】：

是不是如你所愿？ （两张图是一样的）

不一样。在第二张图片上，选择的标签栏有一个不需要的底部边框。

看看这个：doc.qt.io/qt-5/…。看起来你应该造型QTabBar。

另外，如果你自己解决了，请自己写一个答案:)

好的。谢谢你给了我正确的方向。这是一个近似的样式表。关键时刻是 QTabWidget::pane top: -1px; 。它向上移动窗格（它是顶部边框），因此它不会打扰，并且 QTabBar::tab margin-bottom: -1px; 同样，它隐藏了出现的标签栏底部和窗格顶部的差异。

【参考方案1】：

转发我的评论。这是解决方案。

好的。谢谢你给了我正确的方向。这是一个近似的样式表。关键时刻是 QTabWidget::pane top: -1px; 。它向上移动窗格（它是顶部边框），因此它不会打扰，并且 QTabBar::tab:selected margin-bottom: -1px; 以及 - 它隐藏了出现的标签栏底部和窗格顶部的差异

QTabWidget::pane 
  border: 1px solid lightgray;
  top:-1px; 
  background: rgb(245, 245, 245);; 
 

QTabBar::tab 
  background: rgb(230, 230, 230); 
  border: 1px solid lightgray; 
  padding: 15px;
 

QTabBar::tab:selected  
  background: rgb(245, 245, 245); 
  margin-bottom: -1px; 

【讨论】：

标签和窗格好像没有对齐，如何对齐？

@Wade Wang 你到底是什么意思？

我的意思是这样的：ibb.co/37q49LK，但是我重新检查了它，它是由它的父小部件引起的，即这个qtabwidget有一个父qtabwidget，并且父qtabwidget设置了一些样式表，使得窗格和选项卡未对齐，则其子 qtabwidget 受到影响。

是的，如果您将此样式表设置为清除 QTabWidget，则不会有对齐。

*没有对齐问题

【参考方案2】：

设置tabwidget的样式：

QTabWidget::tab-bar 
   border: 1px solid gray;

样式标签：

QTabBar::tab 
  background: gray;
  color: white;
  padding: 10px;
 

 QTabBar::tab:selected 
  background: lightgray;
 

样式面板：

QTabWidget::pane  
   border: none;

例子：

【讨论】：

但它仍然没有将我们从所选TabBar的底线拯救出来。此行来自顶部窗格边框。

查看我所做的更改。禁用边框，并自定义将在任何选项卡内的小部件。用户：QTabWidget::pane 边框：无；

我也试过这个变种。即便如此，我需要整个窗格边框，除了选定的 Tabbar。谢谢，但我找到了解决方案。我不知道在哪里发帖，所以我把它作为对第一条消息的评论发布了，正如帮助所推荐的那样，所以它可能很难看到。