QML：如何处理现有边距的定位锚点

Question

在Windows 7下使用Qt 5.10.1。我正在尝试将一些组件锚定在已定义边距的项内。我的意思是，我想要考虑边距进行锚定。

我的代码：

Item {
  width: parent.width
  anchors.margins: 100

  Rectangle {
    width: 50
    height: 50
    anchors.right: parent.right
  }
}

我会把矩形放在右侧，但距离边缘100像素。然而，它只被放置在边缘。

当然，我可以添加：

anchors.rightMargin: 100

但是我必须为每个主要项目的子项手动执行此操作。我想知道是否有一种方法可以处理现有的边距。

- Mark

Answer 1

如果我理解正确，你的问题不是矩形（Rectangle）的位置，而是父级项（Item）的位置。

由于你定义了项目的宽度（width）而没有使用明确的锚点（anchors），因此边距无效。

尝试使用锚点而不是宽度来定位该项目：

Item {
  anchors.fill: parent
  anchors.margins: 100

  Rectangle {
    width: 50
    height: 50
    anchors.right: parent.right
  }
}

Item将正确地从其父项偏移100像素，Rectangle将位于Item的边缘。

请注意，在QML中没有“类似CSS填充”的行为：您必须在每个子组件中明确定义它如何填充父级。

关于填充：

在QML中不存在填充（除了Qt Quick Controls 2组件）：将一个项目声明为另一个项目的子项并不意味着它在视觉上位于其父级内部。因此，定位元素的唯一方法是在每个子项上使用anchors。

如果要在父项中模拟填充，可以将其定义为property并在每个子项中使用它。如果在Row或Column中使用，据我所知，唯一的解决方案是在每个子项中指定rightMargin。

Item {
  readonly property int padding: 100

  width: parent.width
  height: parent.height

  Rectangle {
    width: 50
    height: 50
    anchors {
      right: parent.right
      margins: parent.padding
    }
  }
}

或者将子元素包裹在另一个 Item 中：

Item {
    width: parent.width
    height: parent.height

    Item {
        anchors.fill: parent
        anchors.rightMargin: 100

        Rectangle {
            width: 50
            height: 50
            anchors.right: parent.right
        }
    }
}

- augre

---

我无法使用anchors.fill: parent，因为它与Column或Row不兼容。 - Mark

嗯，我正好在寻找类似CSS填充行为的东西... - Mark

我想不到其他解决方案，除了在每个子元素中定义“rightMargin”...请查看我的更新以获取更详细的答案。 - augre

是的，你提到的关于“padding”属性的提示就是我所说的“手动为每个子元素执行此操作”的解决方法。不幸的是，我必须这样做。感谢您的解释，我通常会花费数小时尝试我无法做到的事情... - Mark

我实际上想到了第三种解决方案：使用一个空的子项来作为填充：Item {id: rightPadding; anchors.right: parent; anchors.margins: 100 }，然后将所有兄弟项都用 anchors.right: rightPadding.left 进行定位。这只是另一种可能的“hack”方法来模拟填充 :-) - augre

QQC2中确实存在填充(padding)。 - GrecKo