如何用样式表更改QPushButton图标/文本间距?

时间:2013-06-27 14:17:45

标签: qt user-interface qtstylesheets

我对Qt的样式表方法还不熟悉,我希望调整QPushButton上图标和文本之间的间距。

这是我所指的差距:http://imageshack.us/scaled/thumb/593/4kem.png(stackoverflow不会让我发布照片)

QPushButton {
   qproperty-icon: theme_url("/button_action/add");
   qproperty-iconSize: 14px; 
}

我可以用一个参数来调整这个空间吗?我试过了marginpaddingspacing?也许有一个不同的选择器可以用来抓住图标?

5 个答案:

答案 0 :(得分:1)

至少Qt5.5(这可能会在将来改变,我希望),除了重写油漆事件,这是复杂的,在我看来凌乱的一件简单的事情,没有固有的Qt方式在这里或那里移动该图标几个像素(小调整)。如果您删除图标并使用样式表在资源网址中将background设置为您的图标,则可以在样式表中使用background-position属性,但不幸的是,它只接受center之类的字词,left等,不是像素调整。

这是我如何解决这个问题。我创建了比我需要的略大的透明PNG,我在PNG内部的图标周围有一个4px的边距。然后,我只是移动了该画布中的图标并将其重新加载到项目资源文件中,然后再次使用QPushButton的设计器中的icon属性进行映射,这样就可以了。我现在有一些图标在左边正确排列,旁边有文字。我甚至可以扩大图标和文字之间的差距。

答案 1 :(得分:1)

从Qt5.7开始,我不知道图标/文本间距的任何内置功能。 我通常做的是给图像一些更多的空间,并相应地设置按钮的图标大小。

<强>解决方案

  1. 将图标文件的大小调整为32 * 16像素,但保持其内容不变。
  2. 在按钮上调用setIconSize(QSize(32,16))。
  3. 结果:现在它的图标和文本之间有16个像素空白区域。 32像素只是我的例子,你当然可以将额外的尺寸设置为符合你风格的东西。

    如果要在所有按钮元素上应用它,只需创建一个在构造函数中自动执行的小子类。实际上没有必要为此重写 paintEvent 方法。

答案 2 :(得分:0)

实际上有了QPushButton,你运气不好。您可以在qt documentation中找到样式按钮的完整工作选项列表(我假设您使用的是qt5,但它也适用于其他版本)。

如果您想要更多地控制图标,通常建议您将QPushButtons与QToolButtons交换完全相同,只是它们具有额外的功能以使它们与工具栏兼容 - 并且 - 它们有更多的图标放置选项。但这可能不适合你,因为as you can see它们的样式与QPushButtons完全相同。但请查看“toolButtonStyle”参数,该参数允许您移动图标。

列表中的下一步是更改图稿。如果您想要的只是更多空间,那么只需将额外的空白像素添加到图稿中。这真的伤害了完美主义者的思想,但是很有效。

列表中的下一步是继承QPushButton并自己覆盖绘制。听起来比现在更令人生畏。 Qt中的子类已经成为一种习惯,并且效果很好。在子类化问题上,这里是jiffie中的tutorial i googled(对于4.8,但对于5应该大致相同)。它甚至涵盖了覆盖油漆事件。

希望这有用。

答案 3 :(得分:0)

最简单的方法是创建自己的继承自QPushButton的类并覆盖PaintEvent,然后手动将图标的像素图放在任何你想要的位置。

答案 4 :(得分:0)

这是一种实现“文本和图像之间的空间”的解决方法:

select min(id), name, price from table_name group by name, price

由于 qss 不支持相对大小,您需要实现 QPushButton{ border:0px; image: /*your url*/; padding-top:16px; image-position:top; text-align:bottom; padding-bottom:10px; } 以在大小更改时更改样式表以获得文本和图像之间的固定空间。