Flutter如何实现treeview控件

在Flutter中如何实现一个可展开折叠的TreeView控件？目前项目需要展示层级数据，类似文件目录结构，希望能支持动态加载子节点。尝试过几种第三方库但效果不理想，求推荐最佳实现方案或核心代码示例。需要注意哪些性能优化点？

2 回复

Flutter没有内置TreeView控件，可通过第三方库如flutter_treeview实现，或自定义使用ExpansionTile嵌套构建树形结构。

更多关于Flutter如何实现treeview控件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 没有内置的 TreeView 控件，但可以通过 ExpansionTile 或第三方库实现。以下是两种常用方法：

1. 使用 ExpansionTile 实现（适合简单树形结构）

class TreeNode {
  final String title;
  final List<TreeNode> children;
  TreeNode(this.title, [this.children = const []]);
}

class TreeView extends StatelessWidget {
  final List<TreeNode> nodes;
  
  const TreeView(this.nodes, {super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: nodes.map((node) => _buildTree(node)).toList(),
    );
  }

  Widget _buildTree(TreeNode node) {
    if (node.children.isEmpty) {
      return ListTile(title: Text(node.title));
    }
    return ExpansionTile(
      title: Text(node.title),
      children: node.children.map(_buildTree).toList(),
    );
  }
}

// 使用示例
TreeView([
  TreeNode('Parent 1', [
    TreeNode('Child 1.1'),
    TreeNode('Child 1.2'),
  ]),
  TreeNode('Parent 2'),
])

2. 使用第三方库 flutter_treeview（功能更完整）

在 pubspec.yaml 添加依赖：

dependencies:
  flutter_treeview: ^1.0.0

使用示例：

import 'package:flutter_treeview/flutter_treeview.dart';

class TreeExample extends StatefulWidget {
  @override
  _TreeExampleState createState() => _TreeExampleState();
}

class _TreeExampleState extends State<TreeExample> {
  final TreeViewController _controller = TreeViewController(
    children: [
      Node(
        key: '1',
        label: 'Parent 1',
        children: [
          Node(key: '1.1', label: 'Child 1.1'),
          Node(key: '1.2', label: 'Child 1.2'),
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return TreeView(
      controller: _controller,
    );
  }
}

选择建议：

  • 简单需求：使用 ExpansionTile 自定义实现
  • 复杂需求：使用 flutter_treeview 库，支持展开/收起、图标、选中状态等

两种方法都能实现树形结构显示，根据项目复杂度选择合适方案即可。

回到顶部