17370845950

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