Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Mouse area handling.



  • I have 3 images and i want one mouse area to handle click events for all the 3 images. Is it possible?
    Note: I don't want 3 different mouse area. Only one mouse area.



  • Hi @JasmineSethi , you can do one thing you can enclose all the 3 images under one Item and give that item a Mousearea.

    For example:-

      Item {
             id: root
         [..]
         [..]
         Image {
             id: image1
             [..]
             [..]
         }
         Image {
             id: image2
             [..]
             [..]
         }
         Image {
             id: image3
             [..]
             [..]
         }
    
     MouseArea {
         anchors.fill: parent
    
         onClicked: {
         [..]
         console.log("Clicked")
         [..]
      }
    }


  • @Shrinidhi-Upadhyaya Hi, this will not solve my problem because onclick is accessible outside the image also. I want onclick to accessible only inside the images.



  • @JasmineSethi , you can give the Item(id: root) the combined height and width of the rectangle, so that the click does not happen outside the 3 images. Can you please tell me a bit more about what exactly do you want, like how you are going to position the 3Images and what you want to do on the click,so that i can give you a more optimal solution.



  • @Shrinidhi-Upadhyaya

    import QtQuick 2.0

    Rectangle
    {
    width: 400
    height: 300
    Item
    {
    width: parent.width
    height: 300
    Image
    {
    id: first
    source: "Selected.png"
    Text
    {
    text: qsTr("Image 1")
    color: "black"
    font.pixelSize: 10
    anchors.centerIn: parent
    }
    }
    Image
    {
    id: second
    anchors.left: first.right
    source: "Selected.png"
    Text
    {
    text: qsTr("Image 2")
    color: "black"
    font.pixelSize: 10
    anchors.centerIn: parent
    }
    }
    Image
    {
    id: third
    anchors.left: second.right
    source: "Selected.png"
    Text
    {
    text: qsTr("Image 3")
    color: "black"
    font.pixelSize: 10
    anchors.centerIn: parent
    }
    }
    MouseArea
    {
    anchors.fill: parent
    onClicked: {
    console.log("clicked")
    }
    }

    }
    

    }

    0_1552454994321_323ceed6-c276-4e74-86d2-6a06ba634162-image.png

    I want like this.



  • Hi @JasmineSethi , here is the code:-

     Item {
        width: 400
        height: 300
    
        RowLayout {
            anchors.fill: parent
            spacing: 0
    
            Repeater {
                model: 3
    
                Image{
                    Layout.fillHeight: true
                    Layout.fillWidth: true
    
                    Text {
                        text: "Image" + index
                        anchors.centerIn: parent
                    }
    
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            console.log("Clicked")
                        }
                    }
                }
            }
        }
    }

Log in to reply