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

Posted 2023-02-16

【中文标题】在 ColumnLayout 周围添加空间的最佳方法？

【英文标题】：Best way to add space around a ColumnLayout?

【发布时间】：2018-12-20 11:17:07

【问题描述】：

我喜欢有一个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)

        
    

【问题讨论】：

应该可以工作，因为CustomProperties.Margins.small 是一个数值。或者你应该添加anchors.fill: parent？

它不起作用。我尝试将 CustomProperties.Margins.small 交换为整数值，但没有任何区别。添加 anchors.fill: parent 到 ColumnLayout 也没有帮助。

@Amfasis：如果有时间，请查看我的编辑

对我来说它确实有效，但是我用简单的Button 替换了CustomComponent.HeaderText。也许你必须为那个HeaderText设置implicitWidth/Height？

【参考方案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，因为它会自行计算其高度。

【讨论】：

感谢您的帮助！但我不能在周围的项目上设置 anchors.fill:parent。该项目不应填充其父项。

@user1283776 Mh...您仍然可以将周围的项目包装到另一个具有特殊 width 和 height 设置的组件中。你能提供一个屏幕截图来显示你想要达到的目标吗？

恕我直言，您不应该在 qml 的根项目中添加锚点，因为您可能会在使用它的任何地方设置它（从而产生警告）