Tree mapping in qml

image
Once a friend of mine asked: “How can I display the tree structure in qml?” I tried to publish the resulting version on the hub, but at that time I overslept an invite ... Under the cut, the second attempt to publish the same article.
Purpose: to develop a test application that displays a tree structure using Qt Quick.
The result can be viewed on GitHub: github.com/1KoT1/QMLPresentTree

Application data structure

In our application, tree elements are described by the TreeItem class.

image

The content property holds some element content. For a test application, a line is fine.
Each instance of an element has a list of subelements contained in it - childItems. In this way a tree is built.
The isOpen property holds the state of the list of internal elements: expanded or hidden.
The hasChild property indicates whether there are any children. One could get around using! Item.childItems (). IsEmpty (), but for the sake of ease of further use, he introduced the hasChild field.
See the code that implements this class in treeitem.h and treeitem.cpp .
In model.h and model.cppAn application data model is described. The model contains a single property - a tree of elements.
In main.cpp, create a model, view and export the model in qml. There is no controller, because there is no functionality other than display.

Tree mapping in qml

Now we pass to the most interesting. We describe the mapping of our tree structure using qml.
The main qml file contains the following code:

import QtQuick 2.0
Rectangle {
    width: 360
    height: 360
    ListView{
        anchors.fill: parent
        model: programmModel.tree
        delegate: ItemView{}
    }
}


The basic idea is as follows: Display a flat list of first-level items. The delegate describing the item contains a flat list for displaying sub-items. Etc. by the structure of the tree.

The window is completely filled with ListView. ListView displays a flat list and lets you scroll it. I indicate our tree as a model. In fact, this is a flat list of elements, each of which in turn contains a list of sub-elements. The display of each item is described in ItemView.qml :

import QtQuick 2.0
Row{
    id: itemView
    Text{
        width: 10
        height: 10
        text: modelData.hasChild? modelData.isOpen ? "-" : "+" : ""
        MouseArea{
            anchors.fill: parent
            onClicked: modelData.isOpen = !modelData.isOpen;
        }
    }
    Column{
        Text{ text: modelData.content }
        Loader{
            source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml"
        }
    }
}


An element consists of outputting content:

Text{ text: modelData.content }


A control that shows the presence of sub-elements and allows you to expand the list:

Text{
        width: 10
        height: 10
        text: modelData.hasChild? modelData.isOpen ? "-" : "+" : ""
        MouseArea{
            anchors.fill: parent
            onClicked: modelData.isOpen = !modelData.isOpen;
        }
    }


Subelement List:

Loader{
            source: modelData.isOpen ? "TreeItemsList.qml" : "Empty.qml"
        }


The list of sub-elements should only be displayed when it is open. To do this, use the Loader element. When closed, Empty.qml is loaded into it - a rectangle of size 0 by 0. The display of an open list of sub-elements is described in TreeItemsList.qml .

Consider it:

import QtQuick 2.0
Column{
    Repeater{
        model: modelData.childItems
        delegate: ItemView{}
    }
}


Building a vertical list occurs using a combination of Column and Repeater elements. Unlike ListView, Column does not allow scrolling content and takes up all the necessary space for displaying internal elements. The whole tree is scrolled using the ListView in the main file.

To display sub-elements, the same delegot is used as in the top-level list. Thus, each element can display its elements. Nesting is limited only by system resources.

Thanks to the approach used, another important requirement is fulfilled: the visual tree is built only for open elements, that is, extra system resources are not wasted.

Also popular now: