QML GridLayout跨度 [英] QML GridLayout span

问题描述

如何使品红色矩形变成比红色矩形短6倍?

How can I make the magenta rectangle to become 6 times shorter than the red rectangle?

    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.fillHeight 是问题所在；它试图尽可能高.而是将 Layout.preferredHeight 设置为第一列所需的高度.另外，当您为每个 Rectangle 指定行和列时，也不必更改流-使用 Layout.alignment 从顶部填充:

The Layout.fillHeight is the problem; it tries to be as tall as possible. Instead, set Layout.preferredHeight to the desired height for the first column. Also, it is not necessary to change the flow when you specify the row and column for each Rectangle -- use Layout.alignment to fill from the top:

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"
    }
}

这篇关于QML GridLayout跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！