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的位置。

由于您定义了项的width而不是使用显式锚点，因此边距不起作用。

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

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组件除外)：将一个项目声明为另一个项目的子项并不意味着它在视觉上位于其父项中。因此，定位元素的唯一方法是在每个子元素上使用anchors。

如果要模拟父项中的填充，可以将其定义为property并在每个子项中使用它：

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