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

Posted 2023-02-16

【中文标题】覆盖 QML 行的 MouseArea（或自动调整大小的图像+文本）

【英文标题】：MouseArea covering a QML Row (or, Auto-Sizing Image+Text)

【发布时间】：2016-06-01 19:17:30

【问题描述】：

总结：如何在没有硬编码尺寸的情况下将图标粘贴在文本旁边，并将它们都包装在 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 specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.，更重要的是，布局中断（我认为 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()

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

但我不能将MouseArea 放在GridLayout 中，因为那样它会尝试将其作为一个项目进行布局。

如何让 MouseArea 包裹按钮？

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

【问题讨论】：

为什么不直接将MouseArea 设为Image 的子级？

一个可怕的黑客是你可以把MouseArea作为GridLayout的一个孩子；它会为它留下一个空白单元格，但使用anchors.fill:myButton 会导致点击区域正确地位于按钮周围。您只需要将所有 MouseArea 放在 GridLayout 的开头或结尾，这样它们就不会在中间留下空洞。

@FilipHazubski 因为我希望用户能够点击图像上的任意位置或伴随它的文本。 “rescan.png”只是带圆圈的箭头，但用户也应该能够点击“查找另一个”并让它工作。

您可以将MouseArea 设为Image 的子级，但使其width 等于Image.width + Text.width + gapWidth。 :) 我认为您可以定义Image 和Text 的id 属性，并且它仅在Row 的范围内可用，因此MouseArea 可以使用它。

另外（很抱歉发送垃圾邮件但）您只能将MouseArea 设为Row 的子级，将Text 和Image 设为MouseArea 的子级并根据儿童尺寸。

【参考方案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" 
    
  

【讨论】：

@Phrogz 是的。这绝对是更好的方法。 :)

为了清楚起见，GridLayout 很容易成为Rectangle，以防有人得到这个答案并想知道GridLayout。这只是来自 TO 的问题