Question

Windows 7下的Qt 5.10.1。我试图在一个定义了边距的项目中锚定一些组件。我的意思是，我想考虑利润率。

我的代码：

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

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

我希望矩形位于右侧，但距离边缘100 px。相反，它只是放在边缘。

当然我可以补充一下：

anchors.rightMargin: 100

但我必须为主要项目的每个子项手动执行此操作。我想知道是否有办法锚定现有的利润率。

Answer 1

如果我理解得很清楚，那么问题不在于Rectangle的位置，而在于父Item的位置。

由于您定义了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 components除外）：将项目声明为另一项目的子项并不意味着它在视觉上位于其父项内。因此，定位元素的唯一方法是在每个孩子身上使用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
        }
    }
}

QML：如何锚定照顾现有的边距

1 个答案: