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

Not able to implement the ListView in QML.



  • I am developing an application using PySide2 and QML. However, I am not even able to implement a simple ListView. The following code is being used to implement the same.

    ApplicationWindow{
        id: mainWindow
        height:480
        width: 800
        visible: true
     
        ListView {
            anchors.fill: parent.fill
            orientation: ListView.Vertical
    
            model: ListModel{
                            id: model
                            
    
                            ListElement {
                                    name: "Apple"
                                    cost: 2.45
                                }
                                ListElement {
                                    name: "Orange"
                                    cost: 3.25
                                }
                                ListElement {
                                    name: "Banana"
                                    cost: 1.95
                                }
                    }  
            
            delegate: Row {
                spacing: 20
                Text { text: "Fruit: " + name }
                Text { text: "Cost: $" + cost }
            }
    

    The output of the above code just shows the one value in the list while I have explicitly added three values.
    Can anyone please tell what's the issue?

    Thanks
    Rahul Gusai



  • you can try to do like this.

    ListView {
        anchors.fill: parent
        orientation: ListView.Vertical
        ...
    

    the result is below.
    c36adbb6-09a5-421a-a5fd-4e36f528821c-image.png



  • This works out but I am trying to put the ListView as one of the items in StackLayout given as following

    
    ApplicationWindow{
        
        id: mainWindow
        height:480
        width: 800
        visible: true
    
     StackLayout{
            id: appStack 
            currentIndex: 0
    
           /*
           *
           *
           *
           *
           */
    
          // Stack Item 5 //
          ListView {
                //anchors.fill: parent
                orientation: ListView.Vertical 
        
                model: ListModel{
                        id: model
                        ListElement {
                                name: "Apple"
                                cost: 2.45
                            }
                            ListElement {
                                name: "Orange"
                                cost: 3.25
                            }
                            ListElement {
                                name: "Banana"
                                cost: 1.95
                            }
                    } 
                
                delegate: Row {
                    spacing: 20
                    Text { text: "Fruit: " + name }
                    Text { text: "Cost: $" + cost }
                }
            }
        }
    }
    

    This gives me just one element in the output.



  • @RG97 Hi, even if you use stacklayout, you need to use the same code which @isdsi mentioned. Only difference is that you need to use it in StackLayout scope:

    ApplicationWindow{
        id: mainWindow
        height:480
        width: 800
        visible: true
    
        StackLayout{
                id: appStack
                currentIndex: 0
                anchors.fill: parent
        ListView {
                orientation: ListView.Vertical
    
            model: ListModel{
                            id: model
    
    
                            ListElement {
                                    name: "Apple"
                                    cost: 2.45
                                }
                                ListElement {
                                    name: "Orange"
                                    cost: 3.25
                                }
                                ListElement {
                                    name: "Banana"
                                    cost: 1.95
                                }
                    }
    
            delegate: Row {
                spacing: 20
                Text { text: "Fruit: " + name }
                Text { text: "Cost: $" + cost }
            }
    
        }
        }
    }
    


  • @Yunus Yeah, thanks a lot. That worked out for me.


  • Moderators

    @RG97 Giving your delegates a hight and width would have helped as well


    The correct answer/comment would have been:
    Giving your ListView a hight and width would have helped as well

    See @GrecKo for explanation



  • This post is deleted!

  • Qt Champions 2018

    @J-Hilk said in Not able to implement the ListView in QML.:

    @RG97 Giving your delegates a hight and width would have helped as well

    No.
    The delegates already had a width and a height: the implicit ones of the Row (the sum of the 2 Text's implicitWidth and the maximum implicitHeight of both text). Had the delegates not have a height, they just would have been stacked on top of eachother.

    The problem here is was that the ListView itself didn't have a height.

    In the first case it was because of anchors.fill: parent.fill instead of anchors.fill: parent and in the second case it was because the ListView was the same size as the StackView but the StackView size was not set.


  • Moderators

    @GrecKo
    true enough, I just tested it in an example.

    I never use the default height so I falsely assumed that to be the root problem :)



  • @GrecKo Can you tell me the difference between the anchors..fill: parent and anchors.fill: parent.fill ?



  • @RG97 said in Not able to implement the ListView in QML.:

    Can you tell me the difference between the anchors..fill: parent and anchors.fill: parent.fill ?

    anchors.fill requires an item (in this case parent) anchors.fill: parent.fill will not work or the parent already fill an other item (or nothing in parent.fill is not set, which I think is the case).


  • Qt Champions 2018

    parent.fill doesn't exist.

    anchors.fill is a property expecting an Item : https://doc.qt.io/qt-5/qml-qtquick-item.html#anchors-prop
    others anchors properties like anchors.top expect an anchor line, that where you can do anchors.top: parent.top but you could also do anchors.top: header.bottom.



  • @KroMignon @GrecKo Thanks for clarifying.
    I want to ask one more thing related to ListView. I have a 5 inch display for which I am developing this hybrid application using PySide2 and QML.Now I want to show some kind of dynamically populated report using ListView.
    I have two of the following options to implement this:

    • Add the list elements and put a scroll bar to scroll through the items.

    • Allocate one page per specific number of List elements and navigate through those pages to find respective elements.

    I have implemented the first option which is default only but I am more inclined towards the second option but not sure of how I can implement this. Is there a way to populate different pages under ListView dynamically ?


Log in to reply