QML ListView shows only 2 of 3 Elements

[Detzi]

I want to create a dynamic amount of Switches that are Located in a ColumnLayout using a "ListView" and "ListModel" like this:

import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls

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

    ListModel {
        id: fruitModel

        ListElement {
            name: "Apple"
            cost: 2.45
        }
        ListElement {
            name: "Orange"
            cost: 3.25
        }
        ListElement {
            name: "Banana"
            cost: 1.95
        }
    }

    ColumnLayout{
        id:configColumn
        spacing: 10
        Layout.fillWidth: true
        Layout.fillHeight: true

        Component {
                id: fruitDelegate
                Switch { text: name }
            }

        ListView {

            //take as much width as possible with a binding
            width: parent.width
            //keep enought height to display each delegate instance
            height: 50
            implicitHeight: height
            implicitWidth: width
            model: fruitModel
            delegate: fruitDelegate
        }
    }
}

When i run this only two of the expected three switches are shown. Can anybody tell me why that is?

I am using QT6 and Qt Creator 5.15.2 on Kubuntu 21.04
Thanks in advance

[KroMignon]

@Detzi said in QML ListView shows only 2 of 3 Elements:

Can anybody tell me why that is?

I think the problem is height: 50 ==> there is not space enough to show more than 2 switches!
I would change this to height: parent.height

[Detzi]

@KroMignon Thank you :)
changing the height property to 100 fixes the problem, but "parent.height" does not work. I also tried
"configColumn.height" but both do only show one element.
Since "configColumn.childrenRect.height" is a "loop" is there a nice way of getting the resulting height or do i have to explicitly set the switch height and calculatate the resulting height, like "height: fruitModel.count*50" ?

[KroMignon]

@Detzi

I would make some changes in your QML code:

• for ColumLayout removeLayout.fillWidth: true and Layout.fillHeight: true and add anchors.fill: parent
• remove implicitHeight, implicitWidth, height and width in the ListView and also add anchors.fill: parent

Since "configColumn.childrenRect.height" is a "loop" is there a nice way of getting the resulting height or do i have to explicitly set the switch height and calculatate the resulting height, like "height: fruitModel.count*50" ?

In the ListView item, the property contentItem.childrenRect.height should contain the value you want to calculate (cf. .https://doc.qt.io/qt-5/qml-qtquick-item.html#childrenRect.width-prop).