如何让Qt Creator QML Designer显示按钮图标？（Qt 4.14.2版本场景）

我在使用Qt Creator 4.x版本时也碰到过这个糟心的问题——运行时按钮图标正常显示，但Designer里就是空白，对复杂GUI设计太不友好了。结合你的场景，这里有几个实测有效的解决方法：

方法1：显式指定图标尺寸并设置空文本 #

Designer在处理Qt Quick Controls 2的Button时，有时候无法自动识别资源图标的尺寸，也会因为未显式设置空文本而占用布局空间，导致图标无法渲染。你可以尝试补充这些属性：

Button {
    id: button
    x: 301
    y: 159
    text: "" // 显式声明空文本，避免Designer生成默认占位
    icon.source: "qrc:/bookmark.png"
    icon.width: 24 // 根据你的图标实际大小调整
    icon.height: 24
}

这样Designer就能正确读取图标的尺寸信息，从而渲染出图标预览。

方法2：用Image替换Button的contentItem #

既然Designer能正常显示拖放的Image组件，我们可以直接把Button的内容区域替换为Image，这样既能保持按钮的交互性，又能让Designer正确预览：

Button {
    id: button
    x: 301
    y: 159
    text: ""
    // 替换默认的contentItem为Image
    contentItem: Image {
        source: "qrc:/bookmark.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit // 保持图标比例
    }
}

这种方式相当于直接用Image作为按钮的可视内容，完全绕开了Designer对Button.icon属性的渲染bug。

方法3：升级Qt Creator版本 #

这个问题其实是Qt Creator 4.14.x版本QML Designer的已知bug，在后续的4.15.x以及更高版本中已经被修复。如果你的项目允许，升级到较新的Qt Creator版本（比如4.15.2或5.x系列），就能直接解决这个预览问题，无需修改代码。

补充说明 #

你之前尝试的背景图方案无效，是因为Designer的问题出在对icon属性的解析上，而非资源读取能力——毕竟你拖放Image组件能正常显示，说明资源路径是对的。上述方法都是针对Designer的渲染逻辑缺陷来解决的，你可以根据自己的项目情况选择最合适的方案。

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