问仅在QML中创建TreeView
EN

Stack Overflow用户

提问于 2021-04-15 05:47:58

回答 1查看 208关注 0票数 1

我只想使用QML创建一个非常简单的TreeView。遗憾的是，这方面的文档/例子相当薄弱。我试图构建一个简单的树，如下所示。我的代码失败了

无法解析原型"ListModel“或"MyDataModel”

有人能把它转换成简单树中显示的层次数据模型吗？或者提供指向(纯QML)示例的链接？

main.qml：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TreeView {
        itemDelegate: myDelegate
        model: MyDataModel {}
    }

    Component {
        id: myDelegate
        Row {
            Text { text: label }
        }
    }
}

MyDataModel.qml：

import QtQuick 2.0
import QtQml.Models 2.12

ListModel {
    ListElement {
        label: "ABC"
        subList: [
            ListElement {
                label: "aaa"
            },
            ListElement {
                label: "bbb"
            }
        ]
    }
    ListElement {
        label: "DEF"
        subList: [
            ListElement {
                label: "ccc"
            },
            ListElement {
                label: "ddd"
            }
        ]
    }
}

qml

treeview

回答 1

Stack Overflow用户

发布于 2022-11-03 18:34:36

我实现了一个模拟AppTreeView，它基本上使用列和Repeater。在复读机里面，我们有一个CheckBox和一个装载机。如果选中CheckBox，则实例化AppTreeView的另一个实例。它的工作方式在某种程度上是递归的，并在QML级别上实现，因此您可以任意深入。对于数据集，我使用Javascript对象模拟了一些东西。

import QtQuick
import QtQuick.Controls
Page {
    property var m: ({
        nodes: ["ABC", "DEF"],
        "ABC": {
            nodes: ["aaa", "bbb"],
            "aaa": {
                nodes: ["Item A1", "Item A2"]
            },
            "bbb": {
                nodes: ["Item B"]
            }
        },
        "DEF": {
            nodes: ["ccc", "ddd"],
            "ccc": {
                nodes: ["Item C"]
            },
            "ddd": {
                nodes: ["Item D"]
            }
        }
    })
    AppTreeView {
        model: m
    }
}

//AppTreeView.qml
import QtQuick
import QtQuick.Controls
Column {
    id: tv
    property var model
    Repeater {
        model: tv.model ? tv.model.nodes : 0
        delegate: Column {
            CheckBox {
                id: checkBox
                text: modelData
                onToggled: {
                    if (checked) {
                        expand();
                    } else {
                        collapse();
                    }
                }
            }
            Loader {
                id: loader
                x: 30
            }
            function expand() {
                loader.setSource(
                    "AppTreeView.qml",
                    { model: tv.model[modelData]
                    }
                );
            }
            function collapse() {
                loader.source = "Blank.qml";
            }
        }
    }
}

//Blank.qml
import QtQuick
import QtQuick.Controls
Item {
}