在 ColumnLayout 周围添加空间的最佳方法？

Question

我喜欢有一个spacing 属性来在布局中的项目之间添加空间。但是是否也可以在布局周围添加空间？

请参阅下面的代码。我尝试在ColumnLayout 上使用anchors.margins，但这不起作用。

Rectangle {
    id: leftSelectionRect
    anchors.top: parent.top
    anchors.right: leftLine.left
    implicitWidth: leftSelectionLayout.implicitWidth
    implicitHeight: leftSelectionLayout.implicitHeight
    color: CustomProperties.Colors.transparentSelectionBackground

    ColumnLayout {
        id: leftSelectionLayout
        spacing: CustomProperties.Margins.small
        anchors.margins: CustomProperties.Margins.small // This is what I would like to do, but it does not work.

        CustomComponents.HeaderText {
            id: leftText
            text: Converter.formatDuration(ui.selectionModel.startUs, Converter.MicroSeconds, Converter.MicroSeconds)

        }

        CustomComponents.HeaderText {
            id: leftdeltaText
            text: "Δ " + Converter.formatDuration(ui.selectionModel.deltaUs, Converter.MicroSeconds, Converter.MicroSeconds)

        }
    }
}

编辑

以下是我所做的第一次尝试，但它很混乱。一定有更好的办法：

Rectangle {
    id: leftSelectionRect
    anchors.top: parent.top
    anchors.right: leftLine.left
    implicitWidth: leftSelectionLayout.implicitWidth + CustomProperties.Margins.medium * 2
    implicitHeight: leftSelectionLayout.implicitHeight + CustomProperties.Margins.small * 2
    color: CustomProperties.Colors.transparentSelectionBackground

    ColumnLayout {
        id: leftSelectionLayout
        spacing: CustomProperties.Margins.small
        anchors.topMargin: CustomProperties.Margins.small
        anchors.bottomMargin: CustomProperties.Margins.small
        anchors.leftMargin: CustomProperties.Margins.medium
        anchors.rightMargin: CustomProperties.Margins.medium
        anchors.fill: parent

        CustomComponents.HeaderText {
            id: leftText
            text: Converter.formatDuration(ui.selectionModel.startUs, Converter.MicroSeconds, Converter.MicroSeconds)

        }

        CustomComponents.HeaderText {
            id: leftdeltaText
            text: "Δ " + Converter.formatDuration(ui.selectionModel.deltaUs, Converter.MicroSeconds, Converter.MicroSeconds)

        }
    }
}

Answer 1

不要将anchors.fill:parent 添加到您的内部ColumnLayout，而是添加到您的外部包装组件：

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

    ColumnLayout {
        id: layout
        width: parent.width
        spacing: 10
        Rectangle {
            color: "red"
            Layout.preferredHeight: 100
            Layout.preferredWidth: parent.width
        }

        Rectangle {
            color: "blue"
            Layout.preferredHeight: 100
            Layout.preferredWidth: parent.width
        }

        Rectangle {
            color: "green"
            Layout.preferredHeight: 100
            Layout.preferredWidth: parent.width
        }
    }
}

您完全应该避免将height 属性或anchors.top AND anchors.bottom 属性设置为您的ColumnLayout，因为它会自行计算其高度。