Aquarius_Girl
Aquarius_Girl

Reputation: 22916

Inserting an image in QML's MenuBar

This is what I want:

enter image description here

I have to place an image on the left side of the menu bar. Where am I supposed to write the Image code so that it appears on the extreme left?

ApplicationWindow
{
    id: window; visible: true; width: Screen.width; height: Screen.height; flags: Qt.FramelessWindowHint

    menuBar:
      MenuBar
      {
        id: menuBar

        Menu
        {
            title: "AmplifyRemote Control";
        }

        Menu { title: qsTr("File") }
        Menu { title: qsTr("Edit") }
        Menu { title: qsTr("View") }
        Menu { title: qsTr("Help") }

        delegate: MenuBarItem
        {
            id: menuBarItem
            enabled: text !== "AmplifyRemote Control"

            font
            {
                pointSize: decoration.font_size_8
                bold: enabled ? false : true
                family: decoration.font_family
            }
            contentItem: Text {
                text: menuBarItem.text
                font: menuBarItem.font
                opacity: enabled ? 1.0 : 1.0
                color: "#3F3F3F" //menuBarItem.highlighted ? "white":"#3F3F3F"
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
            }

            background: Rectangle {
                implicitWidth: 40
                implicitHeight: 40
                opacity: enabled ? 1 : 0.3
                color: menuBarItem.highlighted ? "#292a38" : "transparent"
            }
        }

        background: Rectangle
        {
            implicitWidth: 40
            implicitHeight: 11
            color: "#d2d2d2"
        }
    }
}

Upvotes: 0

Views: 285

Answers (1)

JarMan
JarMan

Reputation: 8277

The image can just be added to the contentItem of your delegate. You can make it only be visible if it's that first disabled item in your menu.

    contentItem: Row {
        Image {
            source: "qrc:/my_image.png"
            visible: !menuBarItem.enabled
        }

        Text {
             ...
        }
    }

Upvotes: 1

Related Questions