MouseArea覆盖QML行（或自动调整大小图像+文本）

Question

摘要：如何在没有硬编码维度的情况下在文本旁边粘贴图标，并将其同时包含在MouseArea ...中，使其在{ {1}}？

我创建了一个QML布局，其中包含来自可点击“按钮”的标签行。按钮是一个图标以及文本：

要创建按钮我正在使用GridLayout，以便两个项目正确粘在一起（没有任何硬编码尺寸）并具有Row可以使用的自动尺寸：

GridLayout

我想在每个按钮周围放一个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" } } } 。如果我把它放在一排，就像这样......

MouseArea

...然后我得到（合理的）错误Row { Image { width:29; height:30; y:10; source:"qrc:/rescan.png" } Text { text:"Find Another" } MouseArea { anchors.fill: parent onClicked: rescan() } } 而且，更重要的是，布局中断（我认为Row的宽度为零，所以GridLayout让它从右侧流出。）

我无法移动QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.之外的MouseArea ......

GridLayout

...因为你只能锚定兄弟姐妹或父母。

但我无法将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() } 放在MouseArea内，因为它会尝试将其作为项目进行展示。

如何让MouseArea包裹按钮？

我可以使用GridLayout以外的容器，但我强烈不想对任何文本或容器尺寸进行硬编码。

Answer 1

在你的帮助下，我们得到了这个：

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