05-25-2012 07:59 AM
I've already successfully created a simple 2 levels list (header, item) from an XML file.
By default, the ListView shows headers and items. I want to know if it's possible to make it auto-expandable, I mean I want my list just present the header items and when the user click on an header item, the second levels appears (and if it clicks again on the header, it hides the second level).
Do you think I can manage that kind of list with Qml ?
Thanks for your help,
Solved! Go to Solution.
05-25-2012 12:06 PM
I don't believe there is any built in way to compress and expand items in a ListView in QML. I think what you are asking about could be done by dynamically adding and removing items from your ListView's data model though. It would require some C++ code to modify your data model. The list of tasks I would do to create this functionality would be:
- maintain a data structure in C++ that contains all headers and items (could parse your xml into a map or some other data structure in C++ that will be used to add to the ListView's data model)
- create a QListDataModel in C++ and fill it with all my headers, then set it to be the data model for the ListView
- create a function that is exposed to the QML that will be called to insert and remove dynamically
- create the ListView with no data model (will be set in C++)
- make two ListItemComponents in my QML for HeaderListItem and StandardListItem
- overload function itemType in QML to create the correct ListItemComponent depending on if it's a header or item element
- the onSelectionChanged: function in QML can check if the selected item is a header, then call the C++ function to either add or remove elements depending if the group has been expanded or not.
Not sure if that would give you the exact behaviour you had in mind, but I believe that would allow for elements to be expanded and compressed in a ListView. The quotes sample app is a nice place to start to see how to create the data model in C++ and how to add elements.
05-25-2012 12:18 PM
If you look at the StampCollector sample app StampCollectorApp:nSelectionChanged, you'll see that this is called when you click the header. When the indexPath size is 1 and it is selected, have the data model expose the children, and if not selected, hide the children again.
05-29-2012 04:17 PM
The attached example demonstrates use of a custom data model to populate a list.
The text styling is wrong, so it shows up as faint text on faint background.
If you click "hello" then "hello" expands. Click again and it collapses.
Ditto for "world"
Is this roughly what you are looking for?
05-30-2012 03:06 AM
Thanks a lot for your sample code.
I'll look into it as soon as possible.
Right now I need to debug my app because some code I've wrote recently made my app buggy and I got error at startup. Anyway, as soon as I can fix it I'll try to implement your code and see if it's ok.
Just wandering if implementing a fake first level in my xml file is not an easier solution (I'm lazy I know) :
<header title="hello header"/>
<listItem title="hello item"/>
<header title="hello header 2"/>
<listItem title="hello item 2"/>
The qml documentation says only the two first levels are displayed. Maybe I'll give it a try too...
I'll tell you my feedback when I'm done.
Again thanks for your support.
06-05-2012 11:53 AM
yes I've successfully solved my issue and my app is running fine now.
Unfortunately, I have not tested your code for now but I'll do it as soon as I can.
Making the list auto-expandable is not a priority but it's a better user experience when you have a lot of items at the second level of your list. That's why I'll try to work on making it possible in my app.
Thanks again for your help,