Important: Please read the Qt Code of Conduct -

Tree Model and QML

  • Hello,

    i'm working on an application based on QStandardItemModel and TreeView. Is it possible to implement the same application (treeview and data) with QML? I'm not very experienced in QML (yet) but i'm looking forward to find a solution for the request. Someone an idea for the beginning?

    Or: when it's not possible at time, will it be possible in the next versions of Qt (QML)?

    Thanks a lot

  • Possible? Yes. Easy? Far from, probably. There is not yet any implementation of a tree view for QML that I know of. Also, the QML item model doesn't support trees.

  • Moderators

    You should probably check out Qt Desktop Components. I don't know if it's implemented there, but that project is likely to have it first, since it's a requirement there.

  • Nope. The desktop components do have an implementation for a table, but not for a tree.

  • Does anyone know when tree's are going to become first rate citizens? Turns out they're really useful...

  • Dig on the interwebs on reports from this years QtCS (contributors summit). I believe there were discussions on this, but I was not there unfortunately.

  • Cool, so the tree view is coming back ( - hopefully as a part of this they'll make QtQuick2 a bit more recursive data structure friendly so that we can implement other widgets based on it.

  • I'm revisiting this after 9 months. There is a good article "here": which shows how to do a pretty simple tree.

    However it's performance when connected to a large C++ model is slow slow slow due to the repeater creating all the elements even if they're not on the screen.

    Can anybody provide any advice on how I could make it use something like a loader or some other method of getting it to only load as much as it needs to draw? (I think because it's recursive a loader on the repeater will only ever show the bottom-most elements because the loader will remove all the elements of the previous load each recursion.... or something to that effect - it's what I see when I try to put a loader in there).

  • So, for anyone else coming across this, I've done a bunch of research and playing around. I have implemented a simple nested list:
    @ Component {
    id: objRecursiveDelegate
    Rectangle {
    property var m_model: model.modelData
    color: (m_model.depth === 0) ? "red" : "yellow"
    height: myTextNode.implicitHeight + objRepeater.contentHeight
    width: parent.width
    Rectangle {
    id: objIndentation
    height: myTextNode.implicitHeight
    color: "blue"
    width: m_model.depth * 20
    TextEdit {
    id: myTextNode
    text: m_model.text
    font.pixelSize: 12
    anchors {left: objIndentation.right; right:parent.right}
    wrapMode: TextEdit.Wrap
    renderType: TextEdit.NativeRendering
    selectByKeyboard: true
    selectByMouse: true
    persistentSelection: true

           ListView {
               anchors {top: myTextNode.bottom; left: parent.left; right: parent.right; }
               height: contentItem.childrenRect.height
               id: objRepeater
               objectName: "objRepeater"
               model: m_model.childrenObjects
               delegate: objRecursiveDelegate
               interactive: false

    ListView {
    objectName: "objListView"
    anchors.fill: parent
    model: objModel
    delegate: objRecursiveDelegate
    focus: true

    However it's performance is a not awesome on large models. If you do something like resize the scene window it chugs.
    has another implementation, which I believe will suffer from the same problem since worst case scenario of having everything expanded will mean everything is loaded.

    However, mapping the tree to a flat list and just making it look like a tree using indentation is amazingly fast even with huge models. Resizing the scene, scrolling, everything is just beautiful.

    Essentially to do that, you change your model to a flat one in the C++, change the above to remove the recursion, and off you go.

    Just thought I'd share my findings. Now the question becomes how do you make a flat list operate like a recursive structure when you want to do things like drag & drop? I can think of one method (traverse and take everything at a lower depth until you get to something the same depth)...

Log in to reply