Change height of ListView based on visible property

Question

I have a ListView where the items become visible or not based on whether a header was expanded or not. When the visible property is set to false, there is just blank space in that area. How do I remove the black space in the list so that the next visible item comes in view? Currently I have set the height:model.count * 50 with 50 being height of each item. I tried subtracting 50 every time an item's visible property is set to false but this just reduces the height of the list overall but the blank space remains.

ListView { id: list
    focus: true
    anchors.top: header.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    width: parent.width
    height:model.count*50
    model:hall

    Component {
        id:comp
        Item{
        width: parent ? parent.width : 0
        height: parent ? parent.height: 0

        Column{
            id:col1
            width: parent.width - 16
            height: 25
            anchors.centerIn: parent

            spacing: 3

            Text { id: name
                width: parent.width
                text: name
                elide: Text.ElideMiddle
                font: "black"
                color: "grey"

            }
            Row{
                width: parent.width

                Text { id: file1
                    width: parent.width * 0.6 - 5
                    text: "hello"
                    horizontalAlignment: Text.AlignLeft
                    elide: Text.ElideMiddle
                    font: systemFont.TableCellFont
                }
                Text { id: file2
                    width: parent.width*0.4 - 3
                    horizontalAlignment: Text.AlignRight
                    text: mod
                    font: systemFont.TableCellFont
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.warn("Mouse onClicked")
                
            }
        }
    }
    }

    delegate: Item {
        width:  parent.width;
        height: {
            if (!cric && expanded)
                return 50
            else
                return 0
        }

        Loader {
            anchors.fill: parent
            sourceComponent: comp
            height: expanded? 50: 0
            readonly property int index:model.index
            readonly property string mod: model.mod
            visible: !cric && expanded
        }
    }

    Keys.onReturnPressed: {
            console.warn("Return pressed") 
        }
    }

Answer 1

The blank space is created because the List item which is hidden by setting visible to false still has its dimensions set. You can update the item height to 0 and the blank space will not be visible. Try this example for reference.

import QtQuick 1.1

Rectangle{
    width: 400; height: 400
    color: 'lightblue'

    ListView{
        width: 400; height: count * 30
        model: 20
        delegate: Rectangle{
            id: rectDel
            width: 200; height: 30
            color: 'lightgreen'
            border{
                width: 1
                color: 'black'
            }

            Text{
                text: index
                anchors.centerIn: parent
            }

            Rectangle{
                width: 20; height: 20
                radius: 10
                color: 'red'
                anchors{
                    verticalCenter: parent.verticalCenter
                    right: parent.right; rightMargin: 10
                }
                Text{ text: 'X'; anchors.centerIn: parent; }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        rectDel.visible = false
                        rectDel.height = 0
                    }
                }
            }
        }
    }
}