Tree Model and QML

rothed

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

andre

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.

sierdzio

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.

andre

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

gemmell

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

andre

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.

gemmell

Cool, so the tree view is coming back (http://qt-project.org/groups/qt-contributors-summit-2013/wiki/QtQuickControls_CS_2013) - 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.

gemmell

I'm revisiting this after 9 months. There is a good article "here":http://www.codeproject.com/Articles/664041/QML-QtQuick-TreeView-Model-Part-II 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).

gemmell

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.
http://qt-project.org/forums/viewthread/30521/#146845
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)...