How to cover Row with MouseArea? - qt

Question

Why does not the MouseArea cover the whole item_row component in my example? If it did , then the Pane would become red when putting the mouse over it. I want the MouseArea to cover the whole Row, so when I put the mouse over the blue square or the labels, the whole pane becomes red, but right now it works only on the empty space. How should I do it?
This is the code, runs with qmlscene
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
visible: true
width: 640
height: 680
title: qsTr("Hello World")
StackView {
anchors.fill: parent
Pane {
id: item_pane
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
contentHeight: parent.height
Row {
id: item_row
Rectangle {
color: "blue"
antialiasing: true
width: 150
height: 150
}
Pane {
background: Rectangle {
color: "transparent"
}
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
ColumnLayout {
Label {
text: "Some data"
Layout.alignment: Qt.AlignHCenter
font.bold: true
}
Grid {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
columns: 2
rows: 3
Label {
text: "Field1:"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
}
Label {
text: "1 sec"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
}
Label {
text: "Field 2"
}
Label {
text: "30 kg"
}
Label {
text: "Field 3"
}
Label {
text: "30 years"
}
}
}
}
MouseArea {
id: mouse_area
hoverEnabled: true
//anchors.fill: parent
onEntered: {
item_pane.background.color="red"
}
onExited: {
item_pane.background.color="#ffffff"
}
}
Component.onCompleted: {
mouse_area.x=item_row.x
mouse_area.y=item_row.y
mouse_area.width=item_row.width
mouse_area.height=item_row.height
console.log("x="+item_row.x+",y="+item_row.y+"width=" + item_row.width +",height="+item_row.height)
}
}
}
}
}

Answer 1

The Row will automatically position all children (that are all Items declared inside its { }) next to each other.
To have a MouseArea cover the whole Row, make the Row and the MouseArea siblings.
Row {
id: myRow
Rectangle {
[...]
}
[...]
}
MouseArea {
anchors.fill: myRow
[...]
}

Answer 2

just make a some wrapper. put Row to Item with same size AND fill this Item by MouseArea