本文介绍一种轻量、可扩展的 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<var> 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 前端处理层级数据的推荐实践路径。
