Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Image size in Item component
Forum Updated to NodeBB v4.3 + New Features

Image size in Item component

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qml
3 Posts 2 Posters 446 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • G Offline
    G Offline
    GrahamLa
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by
      #2

      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
          }
      

      Shrinidhi Upadhyaya.
      Upvote the answer(s) that helped you to solve the issue.

      G 1 Reply Last reply
      2
      • Shrinidhi UpadhyayaS 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
            }
        
        G Offline
        G Offline
        GrahamLa
        wrote on last edited by
        #3

        @Shrinidhi-Upadhyaya
        Thanks

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved