如何使用Flutter实现可展开列表树？求推荐相关插件

原生实现（无依赖） #

如果不想引入第三方包，用Flutter自带的ExpansionTile配合递归组件就能搞定：

1. 定义树形数据结构 #

先搞一个简单的节点类，用来存标题和子节点：

class TreeNode {
  final String title;
  final List<TreeNode>? children;

  TreeNode({required this.title, this.children});
}

2. 递归构建树形列表 #

写一个递归方法，根据节点是否有子节点来渲染ExpansionTile或者普通ListTile，子节点可以加个缩进区分层级：

Widget buildTree(List<TreeNode> nodes) {
  return ListView.builder(
    shrinkWrap: true,
    itemCount: nodes.length,
    itemBuilder: (context, index) {
      final node = nodes[index];
      if (node.children != null && node.children!.isNotEmpty) {
        return ExpansionTile(
          title: Text(node.title),
          children: node.children!.map((child) {
            return Padding(
              padding: const EdgeInsets.only(left: 24),
              child: buildTree([child]),
            );
          }).toList(),
        );
      } else {
        return ListTile(title: Text(node.title));
      }
    },
  );
}

3. 使用示例 #

准备好树形数据，直接调用上面的方法就行：

final sampleTree = [
  TreeNode(
    title: "文件夹A",
    children: [
      TreeNode(title: "文档1.txt"),
      TreeNode(
        title: "子文件夹A1",
        children: [TreeNode(title: "图片1.png")],
      ),
    ],
  ),
  TreeNode(title: "文件夹B"),
];

// 在页面里直接用
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: buildTree(sampleTree),
  );
}

第三方包推荐 #

如果需要更复杂的功能（比如多选、拖拽排序、自定义动画），这些包可以省不少事：

• flutter_tree_view：轻量灵活，支持自定义节点样式、展开/折叠动画，还能管理节点选中状态，API很友好。
• expandable：不止树形结构，各种可展开布局都能搞，提供多种过渡动画，适合需要定制动效的场景。
• tree_view：功能很全，支持拖拽排序、节点编辑、多选模式，适合复杂的树形需求项目。

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