本文介绍一种基于递归建模与动态加载的 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<int> 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 层负责呈现逻辑，数据层负责可靠性——二者边界清晰，方能长治久安。
