qt - 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

但我必须为主要项目的每个子项手动执行此操作。我想知道是否有一种方法可以解决现有的利润问题。

Answer 1

如果我理解得很好，你的问题不是 Rectangle 的位置，而是父级 Item 的位置。

由于您定义了 Item 的 width 而不是使用显式 anchor ，因此边距没有效果。

尝试使用 anchor 而不是宽度来定位项目:

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

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

Item 将正确定位在距离其父项 100px 的位置，Rectangle 将定位在 Item 的边缘。

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

---

编辑(根据您的评论):

如果在 Row 或 Column 中使用，据我所知，唯一的解决方案是在每个子项中指定一个 rightMargin。

关于填充:

QML 中不存在填充(Qt Quick Controls 2 components 除外):将一个项目声明为另一个项目的子项并不意味着它在视觉上位于其父项内。因此，定位元素的唯一方法是在每个子元素上使用 anchors。

如果你想在父项中模拟填充，你可以将它定义为一个属性并在每个子项中使用它:

Item {
  readonly property int padding: 100

  width: parent.width
  height: parent.height

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

或者将 child 包裹在另一个 Item 中:

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

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

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