qt - MouseArea 覆盖 QML 行(或自动调整图像+文本大小)

Question

摘要:如何在不硬编码尺寸的情况下将图标粘贴在文本旁边，并将它们都包装在 MouseArea 中......以一种可行的方式在 GridLayout 内？

<小时/>

我创建了一个 QML 布局，其中在可点击的“按钮”对面有几行标签。这些按钮是带有文本的图标:

为了创建按钮，我使用了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()
  }
}

...然后我收到(合理的)错误 QML Row: Cannot指定 row 内项目的 left、right、horizo​​ntalCenter、fill 或 centerIn anchor 。 Row 将不起作用。 而且，更重要的是，布局会中断(我认为 Row 的宽度为零，因此 GridLayout 让它从右侧流出。)

我无法像这样将 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()
}

...因为你只能锚定 sibling 或 parent 。

但是我无法将 MouseArea 放入 GridLayout 中，因为这样它会尝试将其作为一个项目进行布局。

如何让 MouseArea 包裹按钮？

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

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