烦人的背景位置问题

Question

这是我的样式表：

QLineEdit#SearchBarEditBox {
    background: white;
    background-image: url(:/images/magnifyingGlass.png);
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

我的问题：“背景位置”仅接收“上/下/右/左”值。任何使用数值绝对值的尝试都会立即导致我的图像的“顶部中心”对齐。在这里发疯了......

Answer 1

Qt样式表未实现完整的CSS，您只能center/top/left/bottom/right使用background-position。

在 Qt样式表参考中查看background-position和alignment。

Answer 2

尽管这是一个古老的问题，但我想为如今仍然存在相同问题的那些人回答。

我使用background-origin属性解决了该问题：

  

小部件的背景矩形，与background-position和background-image结合使用。 [...]如果未指定此属性，则默认值为padding。

用于解决问题的完整样式表是：

QLineEdit#SearchBarEditBox{
    background-color: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #DEDEDE;
    padding: 4px 4px 4px 10px; /* top - right - bottom - left */
    background-image: url(:/icons/search.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-origin: content; /* the left margin of background image will 'obey' the padding-left defined up above (10px) */
}

仅出于测试目的，请尝试将填充从“ 10px”更改为“ 30px”，以查看会发生什么情况。

更新基于@ Soyal7评论：

根据要使用的组件的类型，还有另一件事要做，以防止文本重叠：

QLineEdit ：使用ui->SearchBarEditBox->setTextMargins(20, 0, 0, 0);添加左侧文字空白；

QPushButton ：您可以将QPushButton子类化并重新实现paintEvent()方法，或者，如果您想使用更简单的解决方法，只需在文本前添加一些空格即可。

QLabel ：像这样使用indent属性：

希望它会有所帮助：）