使用样式表自定义QTabWidget

Question

使用样式表自定义QTabWidget

4

如何将QTabWidget的样式设置成以下图片中的样子。

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

QTabWidget:pane {
border: 1px solid gray;
}

如果正确的话，它看起来应该像这样：

- Alex Nevskiy

1

这不是你期望的吗？（这两张图片是一样的） - ABCplus

1

不一样。在第二张图片中，所选的tabbar有一个不希望出现的底部边框。 - Alex Nevskiy

看这个链接：http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar 。似乎你应该对QTabBar进行样式设置。 - hyde

另外，如果您自己解决了问题，请自行编写答案 :) - hyde

好的，感谢您给我正确的方向。这是一个大致的样式表。关键时刻是QTabWidget :: pane {top: -1px;}。它将面板上移（以及它的顶边框），以便不会干扰，还有 QTabBar::tab {margin-bottom: -1px; }，它可以隐藏出现的选项卡底部和面板顶部的差异。 - Alex Nevskiy

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; } - Alex Nevskiy

2个回答

3

样式化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;
}

Example:

- mohabouje

但是它仍然无法将我们从所选TabBar的底部线保存。该线来自顶部窗格边框。 - Alex Nevskiy

看一下我所做的更改。禁用边框，并自定义将位于任何选项卡内部的小部件。用户：QTabWidget :: pane { 边框：无; } - mohabouje

我也尝试了这个变体。即便如此，我需要整个窗格边框，除了选定的Tabbar。谢谢你，但我已经找到了解决方案。我不知道在哪里发布，所以我将其作为评论发布到第一条消息中，正如帮助建议的那样，可能不太明显。 - Alex Nevskiy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Nevskiy · Accepted Answer

重新发布我的评论。这是解决方案。

好的。感谢您给了我正确的方向。这是一个近似的样式表。关键是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; 
}