Best way to add space around a ColumnLayout? - qt

Question

I like that there is a spacing property to add space between items in a layout. But is it also possible to add space around a layout?
See my code below. I try to use anchors.margins on the ColumnLayout but that does not work.
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)
}
}
}
EDIT
The following is the first attempt I have made that works, but it is messy. There must be a better way:
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

Do not add anchors.fill:parent to your inner ColumnLayout but to your outer wrapper component:
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
}
}
}
At all you should avoid setting height property or anchors.top AND anchors.bottom properties to your ColumnLayout because it calculates its height at its own.