Introduction to Qt / QML (Part 30) - Customizing ListView

ListView can be customized in a number of ways - actually, in a lot of ways! There are plenty of knobs and levers to control ListView's behavior. We can highlight the current index, we can have keyboard navigation, we can control its scrolling and even have section headings. In this video we'll explore a few of these customization options.

About the host:
This video is presented by Jesper Pedersen, who started with Qt back when Qt was widgets only and the version was 1.44, which gives him 21 years of experience with Qt. Since 2000 he has taught almost 100 Qt classes, ranging from Qt Widgets to QML. Heck, Jesper even taught a few classes on QTopia Core — Trolltech's initial attempt at creating a phone stack. Today Jesper holds a fancy business title, but that doesn't prevent him from coding both in his job and in his spare time.

About KDAB:

KDAB experts regularly take time out to deliver KDAB’s world class training, in-house or at open enrollment courses around the world. We are the market leaders for training in Qt, OpenGL, and C++.

[prasannajoshi]

After subscribing your channel, I said myself "better late then never". I have been going thru all the videos and practicing them side by side.
I like the way you introduce newer topics. Keep it.

[D.P._]

Thank you, very much, Jesper! Nicely described topic with examples. Keep going!)

[NickEnchev]

Thanks again for this video. I'm finding the highlight a little odd to work with. I'm using the highlight to place a different colored rectangle at the listview item just like in the video, and Qt ends up animating the rectangle up and down as I click through my list. This is cool and all, but I also need to change the text color of the delegate item, which I do with a ternary condition in the delegate which changes color. This works but looks pretty bad as it changes the color before the highlight slide animation has finished since the currentItem index changes before the animation has even started. I can't imagine the Qt team created a "highlight" feature on ListView and didn't run into this exact situation, affecting the text color seems like it would be one of the most basic things a user would want to do. Any idea how this should be done properly? The currentIndex thing smells fishy to me.

[D.P._]

Got one question, just in case there is a fast solution. If data for our ListModel is not sorted, then "titles" for sections will be duplicated. Say if, in current ListModel 6:54 you swap "Victor" with "Wendy", then you got two groups of "QA". So the question is there a possibility to avoid that behavior? Say if data is from internet or so... you can't be sure that it is sorted correctly. Thank you!

[StarChild.no]

When the ListView gets focused, I use the keyboard navigation to traverse up and down the list. Highlight shows current selection. How do I get the currentItem when using the keyboard navigation to traverse the list? I can get currentItem (model.element) onClicked and onEntered but how do I do it while navigating with the keyboard?

[angucbac]

Hi Jesper,
Could you guide me, how can i add the custom scroll bar into the listview above? I mean, it is not default scrollbar of control in QT, maybe it is a image in horizontal on the right of the listview. Thank in advance

[jeromelaclavere]

Hi Jesper,
again many thanks for your course :-)
As further enhancement of the example I asked me how to avoid the numerical constants you gave in it for the preferedHighLight.
This led me to ask me how the ListView code could reach the height of the delegate and found out that the ListView's "currentItem" property was available for that. I am discovering this world :-)
This would gave for example:
preferredHighlightBegin:
preferredHighlightEnd:
Regards

[mytffwwxg]

Thanks for the awesome video. I was guessing why for preferredHighlightBegin and preferredHilightEnd we should specify pixel. Shouldn't be useful a property where specify the number of rows?

[NickEnchev]

Most use-cases won't have hardcoded lists of data in the QML, it wouldn't hurt to touch on how to feed data externally, like from C++ for example. Or at least simply touch on the topic so people can go off and learn what they need to learn. I can certainly use my imagination and figure it out, but I would bet there are best practices and recommendations that experience Qt devs like Jesper could provide. I've written models in C++ for Qt Widgets, I know it can get complex, but this is the reality of working with Qt, not hard coding list items.

[anjus]

Is it possible to dynamically create list elements??

[nasroml]

Hello Jesper, thanks for the video, I have a question, how to use currentItem of a ListView Component (reusable ListView with ListElement having multiple items), I found a way of creating a property var and declare it the value "model" (property var myDeleagte: model), then use like this: Howerver, I didn't understand this method and why it worked or is there another way.

[musshare]

Hi, thank you for the tutorials.
How do i fetch data from sqlite data base and display it in a listView. Thank you.