QML TreeView

QML does not (at the time of writing) provide a component to display tree structures. There are some approaches/efforts to display tree structures http://qt-way-notes.blogspot.com  http://steveire.wordpress.com. Nonetheless I coded a TreeView on my own. The following video shows the implementation made by me that tries to provide an intuitive, quick, and easy to use TreeView for mobile devices:

In the following I’ll explain the ideas behind this implementation and the example used. The following data structure had been used for this example:

Displayed the classical way this data structure looks like (the example is an SWT TreeView in GTK):

My approach on displaying this data on a mobile device is to display each level of the tree in a separate ListView. Thereby the different levels can be changed by swiping back and forth. The following pictures show the very basic ideas behind this (These pictures are provided just in case the video above did not work.):

You can download the source code of the QML TreeView as part of the current in-development code of my To-Do-O Qt/QML port To-Do-Q. Please note that this is still in a very early stage and features no functionality yet. Actually I focused my work on getting the TreeView working for now. You can also download a packaged version for MeeGo / Harmattan. The TreeView itself can be used for all QML versions from Qt 4.7 on as it relies only on “import QtQuick 1.0” (“import Qt 4.7” respectively). I only packaged a runnable version for Harmattan as this is currently my main target platform and I do not have the time right now to make this available for other targets as well. This will most probably change in the future when I make more progress in this project. It is actually quite fun to “Code once, deploy everywhere” 😉 (with the already mentioned limitations).

This entry was posted in Qt/QML, Snippets and tagged , , , , . Bookmark the permalink.

3 Responses to QML TreeView

  1. Ravi Vagadia says:

    thanks a lot… very useful. 🙂

  2. Pingback: New Version of the QML TreeView « ruedigergad

  3. Pingback: Q To-Do Version 0.7.1 + Updated QML TreeView « ruedigergad

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.