如何在 QML 中高效渲染带层级关系的 SQL 树形数据（支持展开/折叠与多选）_技术教程

本文介绍一种轻量、可扩展的 QML 树形视图实现方案：基于 JavaScript 递归构建内存树结构，配合动态 `Loader` + `Repeater` 渲染层级节点，支持节点展开/折叠、自定义图标切换及后续扩展多选功能。

在 Qt 应用中将扁平化 SQL 层级数据（如 idData, dataName, dataParentId）可视化为交互式树形结构，是常见但易踩坑的需求。直接在 QML 中处理递归逻辑不可行，而预排序+深度字段方案又难以支持运行时动态展开/折叠。理想解法是：由 Python 后端提供原始扁平数据 → QML 端用 JS 构建内存树模型 → 使用递归 Loader 实现惰性渲染。

以下是一个完整、可运行的 QML 教程实现（无需 C++ 插件或复杂 Model 类）：

✅ 核心思路

数据建模：用 JavaScript 对象模拟树节点，每个节点含 dataId、children: string[] 及子节点属性（键名为 dataName）
递归构建：selectRecursive(parentId) 遍历所有子记录并递归生成嵌套结构
动态渲染：AppTreeView 组件通过 Loader 自引用加载自身，实现无限层级；Button 控制展开状态，图标随 checked 切换

? 示例代码（精简关键部分）

// Main.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    title: "SQL TreeView"
    property list dataTable: []

    // 模拟从 Python backend 接收的扁平数据
    function insertRecords(records) {
        records.forEach(r => dataTable.push(r));
    }

    // 查询指定父节点的所有子项
    function selectRecords(dataParentId) {
        return dataTable.filter(([_, __, pid]) => pid === dataParentId);
    }

    // 递归构建树对象（根节点 parentId = 0）
    function selectRecursive(dataParentId) {
        let node = { dataId: dataParentId };
        const children = selectRecords(dataParentId);
        if (children.length > 0) {
            node.children = [];
            children.forEach(([id, name, _]) => {
                node.children.push(name);
                node[name] = selectRecursive(id); // 递归子树
            });
        }
        return node;
    }

    Component.onCompleted: {
        insertRecords([
            [1001, "Homer", 0],
            [1002, "Bart", 1001],
            [1003, "Lisa", 1001],
            [1004, "Ned", 0],
            [1005, "Todd", 1004],
            [1006, "Rod", 1004]
        ]);
        appTreeView.model = selectRecursive(0);
    }

    AppTreeView {
        id: appTreeView
        anchors.fill: parent
    }
}

// AppTreeView.qml
import QtQuick
import QtQuick.Controls

Column {
    id: treeView
    property var model
    property string text: model?.text || "root"

    Button {
        id: toggleBtn
        text: treeView.text
        checkable: true
        checked: true // 默认展开
        icon.source: checked ? "chevron-down.svg" : "chevron-right.svg"
    }

    Repeater {
        model: toggleBtn.checked && Array.isArray(treeView.model.children)
            ? treeView.model.children : []
        delegate: Column {
            x: 30 // 缩进表示层级
            Loader {
                sourceComponent: appTreeViewComponent
                active: true
            }
        }
    }

    // 自引用组件（关键！）
    Component {
        id: appTreeViewComponent
        AppTreeView {
            model: {
                let childNode = treeView.model[modelData];
                return childNode || { dataId: 0, text: modelData };
            }
            text: modelData
        }
    }
}

⚠️ 注意事项与优化建议

性能边界：该方案适用于 ≤1000 条记录的中小型树。若数据量大，应改用 按需查询（on-demand SQL）：监听 onClicked 后再调用 Python 的 fetchChildren(parentId)，避免一次性加载全量数据。
循环引用防护：SQL 数据必须确保无环（如 A→B→A），否则 selectRecursive() 将栈溢出。可在 Python 层添加拓扑排序校验。
多选扩展：为每个节点增加 selected: false 属性，在 Button 中绑定 CheckBox 或使用 checkable: true + onClicked 更新全局选中状态 Map。
图标资源：chevron-right.svg 和 chevron-down.svg 需存为本地 SVG 文件，或直接内联为 icon.source: "data:image/svg+xml,..." Base64 字符串。

此方案平衡了开发效率与运行时灵活性，无需自定义 QAbstractItemModel，也规避了 TreeView 组件对 QSortFilterProxyModel 的强依赖，是 QML 前端处理层级数据的推荐实践路径。