Дополнительное пространство в нижней части потока

Question

У меня есть такой код QML:

MyItem.qml:

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Item {
    id: root
    width: parent.width
    height: grid.height

    Rectangle {
        anchors.fill: root
        color: "blue"
        z: -1
    }

    Flow {
        id: grid
        width: parent.width
        spacing: 5
        Button {
            text: qsTr("Button 1")
        }
        Button {
            text: qsTr("Button 2")
        }
        Button {
            text: qsTr("Button 3")
        }
    }
}

main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {

        anchors.fill: parent

        Button {
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "hello"
        }

        MyItem {
            Layout.fillWidth: true
        }
    }
}

Если поток достаточно широк, чтобы все три кнопки были на одной линии (как с RowLayout), в нижней части потока есть дополнительное пустое пространство (примерно Button.height * 2). Похоже, что высота потока всегда вычисляется как сумма всех высот его элементов.

Какая логика стоит за этим поведением? Как сделать так, чтобы Flow соответствовал высоте содержимого?

РЕДАКТИРОВАТЬ1: Это не Flow, но «корневой» элемент имеет неправильную высоту.

РЕДАКТИРОВАТЬ 2: Загрузить образец приложения

Answer 1

Проблема с вашим кодом в том, что корневым элементом выражения являются:

anchors.fill: parent 
height: grid.height 

конкурируют, в первом выражении вы указываете, что размеры корня будут принимать размер окна, и это подразумевает высоту, но в следующем выражении вы указываете, что высота будет больше не из окна, а из сетка, так что генерирует неопределенное поведение. Единственное решение - установить, что ширина корневого элемента соответствует ширине окна.

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: root
        height: grid.height
        width: parent.width
        Rectangle {
            anchors.fill: root
            color: "blue"
        }
        Flow {
            id: grid
            width: parent.width
            spacing: 5
            Button {
                text: qsTr("Button 1")
            }
            Button {
                text: qsTr("Button 2")
            }
            Button {
                text: qsTr("Button 3")
            }
        }
    }
}

Обновление:

Похоже, вы не знаете, как они работают (по умолчанию https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html#details), по умолчанию берется высота implicitHeight.

Кроме того, если вы используете макет, вы не должны устанавливать привязки в элементах, на которые непосредственно влияют макеты, в вашем случае CommandsTab зависит от макета, поэтому вы не должны использовать width: parent.width, излишне.

CommandsTab.qml

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Item {
    id: root
    implicitHeight: grid.height
    Rectangle {
        anchors.fill: root
        color: "blue"
        z: -1
    }
    Flow {
        id: grid
        width: parent.width
        spacing: 5
        Button {
            text: qsTr("Button 1")
        }
        Button {
            text: qsTr("Button 2")
        }
        Button {
            text: qsTr("Button 3")
        }
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.fill: parent
        Button {
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "hello"
        }
        CommandsTab {
            Layout.fillWidth: true
        }
    }
}