QML 响应式网格布局

Question

我正在尝试让我的网格布局响应。它在创建 window 时正确呈现。如果我尝试最大化应用程序，它会在顶部和底部留下额外的空白。我不知道如何解决这个问题。有人有什么想法吗？

正确：

最大化时不正确：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ApplicationWindow {
    id: window
    title: "Test"
    width: 1366
    height: 768
    visible: true

    GridLayout {
        id : grid
        anchors.fill: parent
        rows    : 2
        columns : 2
        rowSpacing: 0
        columnSpacing: 0

        Rectangle {
            color : 'red'
            width: 300
            height: window.height - 100
        }
        Rectangle {
            color : 'yellow'
            height: window.height - 100
            Layout.fillWidth: true
            
        }
        Rectangle {
            color : 'green'
            height: 100
            Layout.fillWidth: true
            Layout.columnSpan : 2
        }
    }

    

}

Answer 1

not recommended 混合显式大小和布局大小。这就是你使用 Layout 的原因，不是吗？

GridLayout {
    id : grid
    anchors.fill: parent
    rows    : 2
    columns : 2
    rowSpacing: 0
    columnSpacing: 0

    Rectangle {
        color : 'red'
        Layout.preferredWidth: 300
        Layout.fillHeight: true
    }
    Rectangle {
        color : 'yellow'
        Layout.fillHeight: true
        Layout.fillWidth: true

    }
    Rectangle {
        color : 'green'
        Layout.preferredHeight: 100
        Layout.fillWidth: true
        Layout.columnSpan : 2
    }
}

QML 响应式网格布局

QML Responsive GridLayout

qt

qml

qt5

qtquick2