Tree view, QtQuick 2.0, how?



  • I have both a linear and a hierarchical model and I want to display whichever of both in a tree-like view. The leaves should be displayed in a grid, not as a vertical list.

    For example:

    @ Group 1-digit numbers
    Group - even numbers
    2 4
    6 8
    Group - odd numbers
    1 3
    5 7
    9
    Group 2-digit numbers
    Group - even numbers
    12 14
    16 18
    Group - odd numbers
    11 13
    15 17@

    ListView provides some grouping functionality using sections but it supports only a single hierarchy level:
    http://qt-project.org/doc/qt-5/images/qml-listview-sections-example.png

    I've simulated a tree view using nested views - delagates of views that are views themselves, but when having lots of leaves QtQuick 2 becomes really slow as compared to QtQuick 1. So the same code in QtQuick 1 and QtQuick 2 results in much slower execution in QtQuick 2. The code was profiled and analysis showed the same results and the ones observed empirically.
    Updated the QtQuick 2 implementation with the VisualDataModel, which serves as a proxy of the actual model. This sped up the execution sensibly but still the performance is not the required one when having large number of leaves. Just for the test removed all nested views and left 1 GridView that displays the model linearly. The performance hit the ceiling. My questions are:

    1. Is there a way to display a hierarchical model using a single view, without having complicated nested views that slow down the rendering process?
    2. Saw that VisualDataModel has some grouping options, could they be used to simulate hierarchy?


  • Hmm, one solution can be to use JavaScript and iterate over the data and add elements @ runtime. In your case maybe simple text. For each level you move the x value a little bit for the text elements.

    Another way can be to create your own custom element in c++ with "QQuickPaintedItem":http://qt-project.org/doc/qt-5/qquickpainteditem.html. For clicks, you can use simple collision detection (bounding rect) and signals. Put it inside a flickable container for scrolling.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.