a generic qml label for display of an image and a text

JoeCFD

any recommendations for making a generic qml label to display an image and a text?

Functions:

horizontal layout or vertical layout
image first or text first

One option is to use fixed layout to text and image, but kind of messy. Looking
for simpler solutions.

Qt5.15.3 and Ubuntu 22.04

Saviz

@JoeCFD said in a generic qml label for display of an image and a text:

any recommendations for making a generic qml label to display an image and a text?

If by "image and text" you mean a label that displays an icon (e.g., SVG) alongside text, you can use the IconLabel type. While there is no official documentation for it, you can view its source code. It allows you to assign text, an icon, and even customize the layout.

For example, this is how it is used in a Button:

Button {
    id: control

    property real radius: 0

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)

    opacity: control.enabled ? 1 : 0.5

    padding: 6
    spacing: 6

    icon.width: 24
    icon.height: 24

    contentItem: IconLabel {
        id: iconLabel

        spacing: control.spacing
        mirrored: control.mirrored
        display: control.display // Controls Layout

        icon: control.icon // Icon
        text: control.text // Text
        font: control.font
    }
}

If by "image" you mean PNG or other non-icon image types, your best option is to use an Image type alongside a Text or Label type within a layout.

I don’t see any other straightforward approach.