CODEWITHSUNDEEP
qtqml
GrahamSim
GrahamSim

Reputation: 87

Fixing size of image within an item component

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?

Upvotes: 0

Views: 35

Answers (1)

TrebledJ
TrebledJ

Reputation: 8987

Here's the culprit:

Image {
    // ...
    anchors.fill: parent    //  <-- THIS
    // ...
}

This binds the image's area to fill its parent. Remove that line and you should end up with a fixed image of 100x100.

Upvotes: 1

Related Questions