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屋！