Question

在PyQt5中，我一直在处理样式表。对于我的Tabwidget样式表，我想使用border-right属性在标签之间设置边框，但是我希望在边框的底部和顶部有一个间隙，因此边框不与顶部相交或标签栏底部，如下所示：

如果要在样式表中设置边框高度，或者将边框样式设置为虚线，然后设置虚线和间隙的长度，我在徘徊吗？最好通过使用样式表来实现具有间隙的边界的任何方法。谢谢。

编辑：

这是我目前为QTabWidget使用的样式表：

QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;

Answer 1

是的，您可以使用border-image。

此答案仅与CSS有关，但是Qt的实现非常符合CSS规范：https://stackoverflow.com/a/26858151

简而言之，您将创建一个带有预期边框的小方形png图像（在这种情况下，您只需要创建正确的虚线部分，大小取决于所需的虚线样式即可。

不幸的是，当使用圆角Qt时，会“切掉”边框宽度的一半，因此您会在两个相邻标签之间的边框之外看到一个小的间隙。

我创建了一个图像的小示例，它将具有6个像素的黑色和5个透明的图案（我忘记擦除顶部的2个像素，您将不需要它们）：

这是放大图像编辑器时的样子：

之后，这就是您作为样式表基础的需要：

        QTabBar:Tab {
            border-top-right-radius: 14px; 
            border-top-left-radius: 14px; 
            border-image: url(border.png) 2 repeat;
            padding: 2px;
        }
        QTabBar:Tab:!Selected {
            border-right: 2px;
        }

border-image声明中的“ 2”是图像内的边界宽度，需要“ repeat”来告诉Qt必须重复且不拉伸边界图案。另外，请记住也要设置边框的宽度，否则图像将不会显示。

这是结果：

如您所见，边框大小仅为1像素，标签之外还有一个像素。由于问题来自圆角的使用，因此恐怕唯一的解决方案是创建一个包含圆角的完整边框图像。我试图以负边距和CSS定位来解决问题，我认为它无法按预期工作，甚至可能在不同的平台和Qt版本上造成问题。

Qt样式表-顶部和底部带有间隙的边框

1 个答案: