如何保持qml矩形边框不重叠内容？

Question

我想让一个Rectangle自动调整大小以适应它的视觉孩子。如果没有边框，那么以下效果很好：

Rectangle {
    width:  childrenRect.width+(border.width*2)
    height: childrenRect.height+(border.width*2)
    ...
}

但是，如果Rectangle有边框，则子项将重叠。我尝试将子项包装在容器中（在下面的示例中为Column）并使用anchor.margins将容器移到错过Rectangle的边框上，但未成功。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 600;  height: 600

    Rectangle {
        id: rect
        border.width : 20
        border.color: "yellow"
        clip: true

        width: childrenRect.width+(border.width*2)
        height: childrenRect.height+(border.width*2)

        Column {
            anchors.margins: rect.border.width // does not work
            Text { height: 40; text: "FoooooooooooooooMumble" }
            Text { height: 40; text: "Bar" }
            Button { height: 40; text: "press me" }
        }
    }
}

有人可以建议怎么做吗？

Answer 1

要使anchors.margins起作用，必须设置边框锚点（边距空间相对于那些）。例如：

Column {
            anchors.margins: rect.border.width
            anchors.left: rect.left
            anchors.top: rect.top
            ...
}