如何避免带有borderimage的QPushButton的文本剪辑

时间:2014-07-05 21:06:37

标签: qt5 styling qpushbutton qtwidgets

我正在设计一个带有28px边框的边框图像(对于真正的圆角)的QPushButton,如下所示:

#MyApp QPushButton
{
    margin:0;
    padding: 0;
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

然而,似乎在渲染按钮时,按钮上的文本标签会被剪切到边框图像的内部补丁。在我的情况下,这结果是灾难性的:

enter image description here

如何修复此问题,以便在按钮的整个表面上渲染文本,包括边框边缘?

1 个答案:

答案 0 :(得分:2)

这比最初的预期更简单,更直观。

解决方案是将按钮上的负填充设置为与边框图像半径相同,如下所示:

#MyApp QPushButton
{
    margin:0;
    padding: -28px; /* THIS SOLVED IT */
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

现在按钮看起来正确:

enter image description here