Image size in Item component

GrahamLa

Hi
I want to fix the size of an image within an item and have a taller rectangle to the right of it.

Here is the declaration of my component

import QtQuick 2.9
import QtQuick.Controls 2.5

Item {
    id: button
    width: 100
    height: 200
    signal clicked

Image {
    id: backgroundImage
    anchors.fill: parent
    source: (button.enabled ? "images/simulation.png" : "images/simulation.png")
    width: 100
    height: 100
}

Rectangle {
    color: "#22add8"
    anchors.left: backgroundImage.right
    anchors.leftMargin: 10
    width: 5
    height: 200
}

//Mouse area to react on click events
MouseArea {
    anchors.fill: button
    onClicked: {
        console.log("clicked")
        button.clicked()
    }
    onPressed: {
        console.log("pressed")
        backgroundImage.source = "images/simulation.png" }
    onReleased: {
        console.log("released")
        backgroundImage.source = (button.enabled ? "images/simulation.png" : "images/simulation.png")
    }
}

}

The image always takes the height of the item

How can I fix the size of the image?

Shrinidhi Upadhyaya

Hi @GrahamLa ,make these changes to the code:-

 Image {
        id: backgroundImage
        
        //####Remove the below line,you are assigning the height and width of the parent.
        //            anchors.fill: parent
        source: (button.enabled ? "images/simulation.png" : "images/simulation.png")
        width: 100
        height: 100
    }

GrahamLa

@Shrinidhi-Upadhyaya
Thanks