Question

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

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

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属性或anchors.bottom和ColumnLayout属性，因为它会自行计算其高度。

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

1 个答案: