1

I made a new QML project which auto-generated a main.cpp. I added an icon to the qml.qrc which now looks like this:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>bookmark.png</file>
    </qresource>
</RCC>

I then add a button and set the icon. The QML Designer doesn't seem to have a field for that, so I have to do it via code. Also I don't want any text on the button:

import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("Scroll")
    
    Button {
        id: button
        x: 301
        y: 159
        icon.source: "qrc:/bookmark.png"
    }
}

I compile and run to end up with this window which is what I wanted: Image of window with bookmark button

However, the QML Designer shows me this: QML Designer not showing the bookmark icon in the button

As you can see the icon is missing. When designing a more complicated GUI that is heavy on icon-only buttons you end up with a bunch of empty squares that make it very difficult to see what you are doing. In my desperation I tried to set the icon as the background image:

    Button {
        id: button
        x: 301
        y: 159
        icon.source: "qrc:/bookmark.png"
        background: Image {
            id: name
            source: "qrc:/bookmark.png"
        }
    }

When I run this I get a button with both the icon and the background image overlapping which makes sense. When I look at it in the QML Designer it stil shows me an empty button. I can add images just fine, drag+drop of the bookmark.png asset causes an Image element (also loading qrc:/bookmark.png) to be added that is visible in both the application and QML Designer, so QML Designer is generally capable of looking into resource files and displaying images.

I'm using Qt Creator/QML Designer plugin 4.14.2.

Is there any workaround to make QML Designer show icons?

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
nwp
  • 9,623
  • 5
  • 38
  • 68

0 Answers0