如何更改列或行中项之间的间距

Question

我在QML中使用Column和Row类型对齐Item s。有没有办法给每个Item不同的间距?以下内容:

和:

item1

间距:10

第二条

间距:20

item3

间距:40

item4

下面是我的代码:

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle{
        id: rect
        anchors.fill: parent
        Column{
            id: column
            anchors.centerIn: parent
            spacing: 10
            Row{
                id: row1
                anchors.horizontalCenter:  parent.horizontalCenter
                Rectangle{
                    width: 300
                    height: 100
                    color: "lightgreen"
                }
            }
            Row{
                id: row2
                anchors.horizontalCenter:  parent.horizontalCenter
                Rectangle{
                    width: 100
                    height: 50
                    color: "lightblue"
                }
            }
            Row{
                id: row3
                anchors.horizontalCenter:  parent.horizontalCenter
                Rectangle{
                    width: 50
                    height: 50
                    color: "green"
                }
            }
        }
    }
}

Answer 1

带有分隔符的粗糙版本

有时候我更喜欢这个而不是ColumnLayout，因为在某些情况下我只是不能使用ColumnLayout(目前无法解释为什么)。我让它工作如下

Column {
    Rectangle {
        // ...
    }
    Item {
        width: 1 // dummy value != 0
        height: 10
    }
    Rectangle {
        // ...
    }
    Item {
        width: 1 // dummy value != 0
        height: 20
    }
    Rectangle {
        // ...
    }
}

宽度为0的Item不能工作。我建议放一个Spacer_Col。qml(和Spacer_Row类似)到您的工具箱中，看起来像

import QtQuick 2.8
Item {
    id: root
    property alias spacing: root.height
    width: 1 // dummy value different from 0
}

使用ColumnLayout

ColumnLayout {
    Rectangle{
        // ...
    }
    Rectangle{
        Layout.topMargin: 10
        // ...
    }
    Rectangle{
        Layout.topMargin: 20
        // ...
    }
}

Answer 2

通过嵌套您想要间隔的每个矩形，如下所示;

    Row {
        spacing: 20
        Rectangle { color: "red"; width: 50; height: 50 }
        Row {
            spacing: 50
            Rectangle { color: "green"; width: 20; height: 50 }
            Row {
                spacing: 100
                Rectangle { color: "blue"; width: 50; height: 20 }
            }
        }
    }

不同的行间距