ListView inside another ListView
-
Hi,
I'm trying to find the right way to solve following problem:
I have a vertical ListView which contains horizontal ListViews in it's Delegates. Imagine it as a table, which you can scroll horizontally and also scroll each column vertically.
Now what would be the best way to fill such UI with data? I used to have a model implemented in Python and it works well. But I want to port it away from Python and use only QML.
Imagine I have a list of 1000 text items and I want to fill the 2nd column with them. How could I do it? Is it possible to directly access for example the 2nd delegate of my horizontal ListView and call a function inside it, which would append the items?
I hope it's clear what I want to do. If not, please let me know and I'll provide an example....
-
I would create a data model to be like this:
@
property var rowModel: [
{colModel:[{name:"item11"},{name:"item12"}]},
{colModel:[{name:"item21"},{name:"item22"}]}
]
@
And then display it like this:
@
ListView{
orientation: ListView.Vertical
model: rowModel
delegate: ListView{
orientation: ListView.Horizontal
model: modelData.colModel
delegate: Text{text: modelData.name}
}
}
@
Unfortunately there is no method for getting ListView item by its order. However you can use currentIndex and currentItem properties as workaround. -
Thank you, good idea, it works just like I needed!
-
One more question regarding this. Let's say I have a quite huge set of data which is a 2 dimensional list. The modified example from above would contain something like this:
@ property var rowModel: [
{colModel:[{name:"item11";address:"address11"},{name:"item12";address:"address12"}]},
{colModel:[{name:"item21";address:"address21"},{name:"item22";address:"address21"}]}
]
@The list I have looks like this:
@[["item11","address11"],["item12",address12"],["item12",address13"], ... ]@
Now I want to set this data as the content of one of the colModel. What would be the best way to do it?
-
You can work with this same as with JSON object/array.
Lets assume the rowModel from your post
@
rowModel[1].colModel[1]={"name":"changedItem22","address":"changedAddress22"};
@
Will produce:
@
[
{colModel:[{name:"item11";address:"address11"}, {name:"item12";address:"address12"}]},
{colModel:[{name:"item21";address:"address21"}, {name:"changedItem22";address:"changedAddress22"}]}
]
@
Values in square brackets can be accessed by index, and values in curly brackets by its key name.
However changing your object like this won't update it's binding see "doc":http://qt-project.org/doc/qt-5.0/qtqml/qml-var.html for more.
But as workaround you can do:
@
var tmp = rowModel;
tmp[1].colModel[1].name="changedItem22";
rowModel = tmp;
@ -
Thanks a lot once again. It works perfectly now. I knew I cannot directly change the values because the view won't be updated. I tried to completely replace the "rowModel" with a 2-dimensional array which didn't work. But your code works very nicely and it is acceptable fast even for thousands of rows, which I was worrying about.