Image size in Item component



  • 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?



  • 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
        }



Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.