QML SplitView - 手动调整孩子的大小

Question

我有一个 QtQuick Controls 1.3 SplitView（因为我在 QT 5.11 上），它包含 3 个垂直方向的矩形。它显示正常，我可以按预期 drag-resize child。

现在我想添加一个按钮，允许用户完全隐藏最底部的矩形，有效地折叠它。但是，我试图调整 rect 的大小没有任何效果：

import QtQuick.Controls 1.3 as C1

[...]
    C1.SplitView  {
        id: splitView
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        width: parent.width - flightSelector.width - separator.width
        orientation: Qt.Vertical

        LateralChart {
            id: lateralChart
            width: parent.width
            height: mainPage.height * 0.75
            Layout.minimumHeight: 30
            Layout.maximumHeight: mainPage.height - 30 - 30
        }

        UtilityBar {
            id: utilityBar
            Layout.minimumHeight: 30
            Layout.maximumHeight: 30

            onCollapse: {
                console.log("minimize")
                flightList.height = 0                // no effect
                flightList.preferredHeight = 0       // no effect
                flightlist.Layout.maximumHeight = 0  // no effect
                flightList.shouldCollapse = true     // no effect
            }
        }

        FlightListTable {
            id: flightList
            width: parent.width
            Layout.minimumHeight: 0
            Layout.maximumHeight: mainPage.height - 60 - 30
            model: flightListFilterModel

            property bool shouldCollapse: false
            C1.SplitView.preferredHeight: shouldCollapse ? 0 : 300
        }
    }
[...]

如果我直接去flightList.visible = false，那么rect会被隐藏，但是中间的rect的位置还在，所以位置错了（应该移到底部）。

如何通过 JS 代码动态调整 SplitView child 内容的大小？

Answer 1

根据 docs，必须始终有一个（且只有一个）child object 将 Layout.fillheight 设置为 true。默认情况下，它将选择 SplitView 中最后一个可见的 child。在你的情况下，听起来你希望它实际上是第一个 child。因此，将 Layout.fillHeight: true 添加到您的 LateralChart 应该会给您所需的输出。

QML SplitView - 手动调整孩子的大小

QML SplitView - manually resize childs

qt

layout

split

qml

resize