如何在qml中的columnlayout中使用间距

Question

在下面的示例中，您可以看到我在 ColumnLayout 中添加了两个 RowLayout，并且还添加了 40 的空间。如果我在 qt design studio 中运行这个示例，那么我看不到两个 RowLayout 之间的空间，请有人告诉我为什么这不起作用？

Rectangle {
    width: 800
    height: 600

    color: Constants.backgroundColor

    ColumnLayout {
        anchors.fill: parent
        spacing: 40 //not working, not able to seperate two rowlayouts, Why?

        RowLayout {
            id: rowLayout
            Layout.fillWidth: true
            height: 20
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            Layout.topMargin: 0

            Button {
                id: button
                text: qsTr("Button")
                Layout.fillWidth: true
            }

            Button {
                id: button1
                text: qsTr("Button")
                Layout.preferredWidth: 70
            }

            Button {
                id: button2
                text: qsTr("Button")
                Layout.preferredWidth: 70
            }

            Button {
                id: button3
                text: qsTr("Button")
                Layout.preferredWidth: 70
            }

            Button {
                id: button4
                text: qsTr("Button")
                Layout.preferredWidth: 20
            }
        }

        RowLayout {
            id: rowLayout2
            Layout.fillWidth: true
            height: 20
            anchors.top: rowLayout.bottom
            Layout.fillHeight: false
            Layout.alignment: Qt.AlignLeft | Qt.AlignTop

            Button {
                id: button6
                text: qsTr("Button")
                Layout.fillWidth: true
            }
        }

        Item {
            Layout.fillHeight: true
        }
    }
}

为什么间距不起作用？

Answer 1

使用布局时：

• 请勿使用

  width

  ，而使用

  Layout.preferredWidth

• 请勿使用

  height

  ，而使用

  Layout.preferredHeight

• 不要使用

  anchors

  ，尽可能使用等效的布局

    Rectangle {
        width: 800
        height: 600
        color: "orange"
        ColumnLayout {
            anchors.fill: parent
            spacing: 40
            RowLayout {
                Layout.fillWidth: true
                Layout.preferredHeight: 20
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                Layout.topMargin: 0
                Button { text: qsTr("Button"); Layout.fillWidth: true }
                Button { text: qsTr("Button"); Layout.preferredWidth: 70 }
                Button { text: qsTr("Button"); Layout.preferredWidth: 70 }
                Button { text: qsTr("Button"); Layout.preferredWidth: 70 }
                Button { text: qsTr("Button"); Layout.preferredWidth: 20 }
            }
            RowLayout {
                Layout.fillWidth: true
                Layout.preferredHeight: 20
                Layout.fillHeight: false
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                Button { text: qsTr("Button"); Layout.fillWidth: true }
            }
            Item { Layout.fillHeight: true }
        }
    }

您可以在线尝试！