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

Posted 2023-03-17

【中文标题】QML SplitView - 手动调整孩子的大小

【英文标题】：QML SplitView - manually resize childs

【发布时间】：2021-10-03 21:17:42

【问题描述】：

我有一个 QtQuick Controls 1.3 SplitView（就像我在 QT 5.11 上一样），它包含 3 个垂直方向的矩形。它显示得很好，我可以按预期拖动调整孩子的大小。

现在我想添加一个按钮，允许用户完全隐藏最底部的矩形，从而有效地折叠它。但是，我没有尝试调整 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，那么矩形将被隐藏，但中间矩形的位置仍然存在，所以它定位错误（它应该移动到底部）。

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

【问题讨论】：

将Layout.fillHeight: true 添加到LateralChart 会有帮助吗？

工作，谢谢！如果您将此添加为答案，我可以接受。

【参考方案1】：

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