QML GridLayout 跨度

【问题标题】：QML GridLayout spanQML GridLayout 跨度
【发布时间】：2014-08-31 16:24:06
【问题描述】：

如何使洋红色矩形比红色矩形短 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

【问题讨论】：

标签： layout qml

【解决方案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"
    }
}

【讨论】：