Mouse area handling.

[JasmineSethi]

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.

[Shrinidhi Upadhyaya]

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")
     [..]
  }
}

[JasmineSethi]

@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.

[Shrinidhi Upadhyaya]

@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.

[JasmineSethi]

@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")
}
}

}

}

I want like this.

[Shrinidhi Upadhyaya]

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")
                    }
                }
            }
        }
    }
}