Unsolved 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.
-
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.
-
@RG97
Giving your delegates ahight
andwidth
would have helped as well
The correct answer/comment would have been:
Giving your ListView ahight
andwidth
would have helped as well -
This post is deleted! -
@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 ofanchors.fill: parent
and in the second case it was because theListView
was the same size as theStackView
but theStackView
size was not set. -
@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). -
parent.fill
doesn't exist.anchors.fill
is a property expecting anItem
: https://doc.qt.io/qt-5/qml-qtquick-item.html#anchors-prop
others anchors properties likeanchors.top
expect an anchor line, that where you can doanchors.top: parent.top
but you could also doanchors.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 ?
-