Model에서 각 항목을 트리로 구현하는 것이 TreeView이다.

각 행에 대한 Data는 Model에서 제공 된다.

아래는 QML에서 TreeView를 작성한 예제이다.

 

main.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
ApplicationWindow {
    width: 640
    height: 480
    title: 'TestTreeview'
    visible: true
    TestTreeview{
        anchors.fill: parent
        anchors.margins: 10
        model: [
            {
                'label': 'Name1',
                'value':'Text',
                'children': [
                    {
                        'label': 'Child1',
                        'value': 'text1'
                    },
                    {
                        'label': 'Child2',
                        'value': 'text2'
                    },
                    {
                        'label': 'Child3',
                        'value': 'text3'
                    }
                ]
            },
            {
                'label': 'Name2',
                'value':'Text',
                'children': [
                    {
                        'label': 'Child1',
                        'value': 'text1'
                    },
                    {
                        'label': 'Child2',
                        'value': 'text2'
                    },
                    {
                        'label': 'Child3',
                        'value': 'text3'
                    }
                ]
            },
            {
                'label': 'Name3',
                'value':'Text',
                'children': [
                    {
                        'label': 'Child1',
                        'value': 'text1'
                    },
                    {
                        'label': 'Child2',
                        'value': 'text2'
                    },
                    {
                        'label': 'Child3',
                        'value': 'text3'
                    }
                ]
            }
        ]
    }
}

 

TreeView 각 행에 대한 Data를 제공하기 위하여 model을 생성하여 입력하고자 parent 객체와 child 객체를 작성한다.

TestTreeView.qml
import QtQuick 2.4
Column {
    width: parent.width
    height: parent.height
    property alias model: columnRepeater.model
    Repeater {
        id: columnRepeater
        delegate: testTreeView
    }
    Component {
        id: testTreeView
        Column {
            width: parent.width
            Item {
                id: infoRow
                width: parent.width
                height: childrenRect.height
                property bool expanded: false
                MouseArea {
                    anchors.fill: parent
                    onClicked: infoRow.expanded = !infoRow.expanded
                    enabled: modelData.children ? true : false
                }
                Text {
                    anchors {
                        left: parent.left
                        top: parent.top
                        margins: 5
                    }
                    font.pointSize: 12
                    visible: parent.visible
                    color: 'black'
                    text: modelData.label
                }
                Text {
                    font.pointSize: 12
                    visible: infoRow.visible
                    color: 'blue'
                    text: modelData.value
                    anchors {
                        top: parent.top
                        right: parent.right
                        margins: 5
                    }
                }
            }
            ListView {
                width: parent.width
                height: childrenRect.height
                visible: opacity > 0
                opacity: infoRow.expanded ? 1 : 0
                delegate: testTreeView
                model: modelData.children ? modelData.children : []
                interactive: false
            }
        }
    }
}

 

main.qml에서 작성한 model을 treeview에 대입하는 코드이다.

main.qml에서 작성한 model은 modelData에 맵핑 되서 각 Text에 대입하는 과정이다.

Reapeater를 통하여 main.qml에서 작성한 model을 가져온다.

첫 번째 Text에서는 main.qml에서 작성한 parent데이터인 modelData.label을 대입하고

두 번째 Text에서는 child데이터인 modelData.value를 대입한다.

ListView를 만들어 각 model에 데이터를 List형식으로 뿌려준다.

클릭 이벤트가 발생시 expanded 값이 true/false로 바뀌며, true일시 child Text에 있는 visible 값이 true가 되면서 child 데이터를 보여준다.