layout - QML GridLayout 跨度

Question

如何使洋红色矩形比红色矩形短 6 倍？

    GridLayout {
        id: gridLayout
        anchors.fill: parent
        flow: GridLayout.TopToBottom
        Rectangle {color: "magenta"
            Layout.row: 0
            Layout.column: 0
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 1
        }
        Rectangle {
            Layout.row: 0
            Layout.column: 1
            color: "red"
            Layout.rowSpan: 6
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }

http://i.stack.imgur.com/nHfmB.gif

Answer 1

Layout.fillHeight是问题所在；它试图尽可能高。相反，设置 Layout.preferredHeight到第一列所需的高度。此外，当您为每个 Rectangle 指定行和列时，无需更改流程。 -- 使用 Layout.alignment从顶部填充:

GridLayout {
    id: gridLayout
    anchors.fill: parent
    Rectangle {
        Layout.row: 0
        Layout.column: 0
        Layout.fillWidth: true
        Layout.preferredHeight: parent.height/6
        Layout.alignment: Qt.AlignTop
        color: "magenta"
    }
    Rectangle {
        Layout.row: 0
        Layout.column: 1
        Layout.fillHeight: true
        Layout.fillWidth: true
        color: "red"
    }
}