寻找可展示JSON存储结构中文件夹与文件的Flutter Widget

一、使用第三方包 flutter_tree_view #

这是专门为树形结构展示设计的包，能快速实现你要的文件夹/文件层级效果：

• 第一步：在pubspec.yaml中添加依赖

  dependencies:
    flutter_tree_view: ^2.2.0
  

• 第二步：把你的JSON结构解析成树形节点模型

  class TreeNode {
    final String id;
    final String name;
    final bool isFolder;
    final List<TreeNode> children;
  
    TreeNode({
      required this.id,
      required this.name,
      required this.isFolder,
      this.children = const [],
    });
  
    // 根据你的JSON字段调整解析逻辑
    factory TreeNode.fromJson(Map<String, dynamic> json) {
      return TreeNode(
        id: json['id'] ?? '',
        name: json['name'] ?? '',
        isFolder: json['type'] == 'folder',
        children: (json['children'] as List?)
                ?.map((childJson) => TreeNode.fromJson(childJson))
                .toList() ??
            [],
      );
    }
  }
  

• 第三步：用TreeView组件渲染

  TreeView(
    treeController: TreeController(
      roots: [TreeNode.fromJson(yourJsonData)], // 传入解析后的根节点
      childrenProvider: (node) => node.children,
    ),
    nodeBuilder: (context, node) {
      return TreeTile(
        leading: Icon(node.isFolder ? Icons.folder : Icons.insert_drive_file),
        title: Text(node.name),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      );
    },
  )
  

二、自定义实现（无第三方依赖） #

如果不想引入外部包，用Flutter自带的ExpansionTile就能嵌套实现：

• 复用上面的TreeNode模型
• 写递归构建树的方法：

  Widget buildFileTree(TreeNode node) {
    // 文件夹且有子节点时，用ExpansionTile实现展开/折叠
    if (node.isFolder && node.children.isNotEmpty) {
      return ExpansionTile(
        leading: const Icon(Icons.folder),
        title: Text(node.name),
        children: node.children.map(buildFileTree).toList(),
      );
    } else {
      // 文件或空文件夹，用普通ListTile展示
      return ListTile(
        leading: const Icon(Icons.insert_drive_file),
        title: Text(node.name),
      );
    }
  }
  

• 使用时直接在页面中调用：buildFileTree(根节点)

注意事项 #

不管用哪种方式，都需要先把你的JSON数据解析成TreeNode结构，示例JSON结构参考：

{
  "id": "root",
  "name": "My Files",
  "type": "folder",
  "children": [
    {
      "id": "file1",
      "name": "resume.docx",
      "type": "file"
    },
    {
      "id": "folder1",
      "name": "Photos",
      "type": "folder",
      "children": [
        {
          "id": "file2",
          "name": "vacation.jpg",
          "type": "file"
        }
      ]
    }
  ]
}

内容的提问来源于stack exchange，提问作者Ape