QToolButton设置image样式表属性不显示图片，改用qproperty-icon生效

我在QToolButton的样式表中通过image属性设置资源文件路径后，运行时未显示图标：

QToolButton#example[state="checked"]
{
  image: url(:/images/checked.png);
}

但将样式表修改为使用qproperty-icon属性后，图标成功显示：

QToolButton#example[state="checked"]
{
  qproperty-icon: url(:/images/checked.png);
}

请问是image属性不被支持（该用法来自官方示例），还是我使用方式有误？

原因分析与解决方案 #

• image属性在QToolButton的样式表中并非不支持，但它的作用逻辑和qproperty-icon完全不同：

  • image是给控件设置一个背景式的绘制图像，它会被QToolButton本身的默认布局（比如图标区域的大小、按钮内部的padding）覆盖，而且不会自动适配按钮的图标尺寸。
  • qproperty-icon是直接操作QToolButton的icon属性，属于Qt属性绑定的样式表用法，它会遵循QToolButton的图标显示逻辑，自动适配按钮的iconSize设置，也不会被控件内部布局遮挡。

• 你用image属性没显示的核心原因：

  1. QToolButton的默认样式中，图标区域有固定的padding和尺寸限制，image绘制的内容可能被挤到了不可见区域；
  2. 没有配合设置image-position、border等属性来调整图像的显示位置和范围，导致图像被按钮的默认样式覆盖。

• 如果一定要用image属性实现，需要补充样式调整显示区域，比如：

QToolButton#example[state="checked"]
{
  image: url(:/images/checked.png);
  border: none;
  padding: 0;
  image-position: center;
}

但这种方式不如qproperty-icon省心，因为后者完全贴合QToolButton的原生图标机制。

内容的提问来源于stack exchange，提问作者user16138748