Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML ListView shows only 2 of 3 Elements



  • 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?
    Screenshot_20211013_120849.png
    I am using QT6 and Qt Creator 5.15.2 on Kubuntu 21.04
    Thanks in advance



  • @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



  • @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" ?



  • @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).


Log in to reply