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

如果Flow足够宽以使所有三个按钮都在同一行（与RowLayout相同），则Flow底部会有一个额外的空白空间（大约Button.height * 2）。看来，流高总是以其所有元素高度的总和来计算的。

此行为背后的逻辑是什么？如何使Flow适合其内容高度？

EDIT1 ：它不是Flow，但是'root'项目的高度错误。

EDIT2： Download the sample app

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），默认情况下，所采用的高度是隐式高度。

如果您使用布局，则不应在直接受布局影响的项目中设置锚点，在这种情况下，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
        }
    }
}

流程底部的额外空间

1 个答案: