MouseArea covering a QML Row (or, Auto-Sizing Image+Text)

Question

Summary: How can I stick an icon next to text, without hardcoding dimensions, and wrap the both of them in a MouseArea...in a way that works inside a GridLayout?

---

I have created a QML layout that has rows of labels across from tappable "buttons". The buttons are an icon along with text:

To create the buttons I am using a Row, so that the two items stick together properly (without any hardcoded dimensions) and have an automatic size that the GridLayout can use:

GridLayout {
  columns:2; rowSpacing:30

  Text {
    text: audioServer.label
    Layout.alignment: Qt.AlignLeft
  }

  Row {
    spacing:10; Layout.alignment:Qt.AlignRight
    Image { width:29; height:30; y:10; source:"qrc:/rescan.png" }
    Text  { text:"Find Another" }
  }

  Text {
    text: "System uptime "+system.uptime
    Layout.alignment: Qt.AlignLeft
  }

  Row {
    spacing:10; Layout.alignment:Qt.AlignRight
    Image { width:29; height:30; y:10; source:"qrc:/restart.png" }
    Text  { text: "Restart" }
  }
}

I want to put a MouseArea around each button. If I put it inside a row, like this...

Row {
  Image { width:29; height:30; y:10; source:"qrc:/rescan.png" }
  Text  { text:"Find Another" }

  MouseArea {
    anchors.fill: parent
    onClicked: rescan()
  }
}

...then I get the (reasonable) error QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function. And, more importantly, the layout breaks (I think the Row gets zero width, so the GridLayout has it flow off the right side.)

I cannot move the MouseArea outside of the GridLayout like this...

GridLayout {
  ...
  Row {
    id: rescanButton
    Image { width:29; height:30; y:10; source:"qrc:/rescan.png" }
    Text  { text:"Find Another" }
  }
}
MouseArea {
  anchors.fill: rescanButton
  onClicked: rescan()
}

...because you can only anchor to siblings or parents.

But I cannot put the MouseArea inside the GridLayout, because then it will try to lay it out as an item.

How can I get a MouseArea wrapping the buttons?

It's acceptable to me to use a container other than Row, but I strongly prefer not to hard-code any text or container dimensions.

Answer 1

With your help we have got this:

GridLayout {
  ...
  MouseArea {
    onClicked: rescan()
    width:  childrenRect.width
    height: childrenRect.height
    Row {
      Image { width:29; height:30; y:10; source:"qrc:/rescan.png" }
      Text  { text:"Find Another" }
    }
  }
}