Not able to implement the ListView in QML.

RG97

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

isdsi

you can try to do like this.

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

the result is below.

RG97

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.

Yunus

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

    }
    }
}

RG97

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

J.Hilk

@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

IntruderExcluder

This post is deleted!

GrecKo

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

J.Hilk

@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 :)

RG97

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

KroMignon

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

GrecKo

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.

RG97

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