如何在 QML 中高效渲染带层级结构的 SQL 数据（支持展开/折叠与多选）

本文介绍一种基于递归建模与动态加载的 QML 树形视图方案，将扁平化的父子关系 sql 表（含 `idData`、`DataName`、`DataParentId`）转换为可交互的层级 ui，支持节点展开/折叠、复选框多选，并兼顾性能与可维护性。

在 qt + python 混合架构中，后端常通过 sqlite 或 postgresql 提供树形数据（如组织架构、分类目录、设备分组），而前端需在 QML 中忠实还原其层级逻辑。直接使用 ListModel 无法表达嵌套关系，硬编码深度遍历又缺乏灵活性。理想的解决方案应满足三点核心需求：结构可扩展、交互可控制、数据可追溯。

✅ 推荐方案：内存递归建模 + 组件化递归渲染

不同于预排序或添加 depth 字段的静态方式，本方案在 QML 层完成“数据→树形对象→UI”的端到端转化，关键在于：

• 前端建模：用 javaScript 对象模拟树结构，每个节点包含 dataid、children（子节点名列表）及同名属性指向子节点对象；
• 按需递归：selectRecursive(parentId) 函数模拟 SQL 的 WHERE DataParentId = ? 查询，实现逻辑上的“懒加载”雏形；
• 组件自引用：appTreeView.qml 通过 Loader 动态加载自身，形成递归委托链，天然支持任意深度。

以下为精简后的核心实现（已适配 Qt 6.5+）：

// ApptreeView.qml import QtQuick import QtQuick.Controls  Column {     id: treeView     Property var model: ({})     // 当前节点数据对象     property string text: model.text || "未命名"      Button {         id: toggleBtn         text: text         checkable: true         checked: true         icon.source: checked ? "qrc:/icons/chevron-down.svg" : "qrc:/icons/chevron-right.svg"         onClicked: checked = !checked     }      Repeater {         model: toggleBtn.checked && Array.isArray(model.children) ? model.children : []         delegate: Column {             x: 30             Loader {                 id: loader                 active: false                 sourceComponent: appTreeViewComponent                 onLoaded: {                     item.model = modelData in treeView.model                          ? treeView.model[modelData]                          : { dataId: -1, text: modelData };                     item.text = modelData;                 }             }             Component.onCompleted: loader.active = true         }     } }  // 内联组件定义（避免循环引用） Component {     id: appTreeViewComponent     AppTreeView {} }

? 复选框集成提示：在 Button 后紧邻添加 checkbox { id: selectBox; onCheckedChanged: console.log(“选中:”, model.dataId, checked) } 即可实现多选；若需全局状态管理，建议将 checked 状态提升至顶层 Page 并通过 property list selectedIds 维护。

⚠️ 注意事项与优化建议

• 数据规模限制：当前方案将整棵树加载至内存，适用于 ≤ 500 条记录的场景。若数据量大，应改用 服务端分页 + TreeView + 自定义 QAbstractItemModel（Python 侧继承 QStandardItemModel，重写 hasChildren() / canFetchMore()），QML 仅调用 fetchMore() 触发按需加载。
• 环路防护：SQL 数据必须保证无循环引用（如 A→B→A）。可在 Python 后端插入前校验，或在 selectRecursive() 中加入 visited Set 集合防止无限递归。
• 图标资源：chevron-right.svg 和 chevron-down.svg 建议以 Qt 资源文件（.qrc）方式部署，确保跨平台路径稳定。
• ID 类型统一：示例中 dataParentId=0 表示根节点，实际项目中建议统一使用 NULL，并在 js 过滤时写为 d[2] === null || d[2] === undefined。

✅ 总结

该方案以“轻量、可控、可读”为设计原则，用纯 QML 实现了树形数据的动态渲染与交互，无需复杂 c++ 模型绑定，特别适合中小型配置类应用。当业务演进至海量数据或强实时性要求时，再平滑迁移到 QAbstractItemModel + TreeView 架构，保持技术栈的延展性。记住：UI 层负责呈现逻辑，数据层负责可靠性——二者边界清晰，方能长治久安。