Qt Stylesheets - 顶部和底部有间隙的边框答案

【问题标题】：Qt Stylesheets - Border with gap at the top and bottomQt Stylesheets - 顶部和底部有间隙的边框
【发布时间】：2019-10-26 03:09:36
【问题描述】：

在 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;

【问题讨论】：

顺便说一句，这不是 Python 或 PyQt 相关的主题，我建议您删除这些标签并添加通用 Qt 标签。此外，在发布样式表时也要尝试使用更好的格式和缩进。

标签： qt qtstylesheets qtabwidget

【解决方案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 版本产生问题。

【讨论】：