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

摘要:如何在不对尺寸进行硬编码的情况下将图标粘贴在文本旁边，然后将它们都包装在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()
}

...因为您只能 anchor 定于 sibling 或 parent 。

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

如何获得包装按钮的MouseArea？

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

最佳答案

在您的帮助下，我们得到了:

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

关于qt - 覆盖QML行的MouseArea(或自动调整大小的图像+文本)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37577045/