flutter如何实现treeview功能

在Flutter中如何实现TreeView功能？需要展示多层级的树形结构数据，最好能支持展开/折叠节点。请问有没有推荐的插件或实现方案？希望提供简单易懂的示例代码。

2 回复

Flutter中可通过第三方库如flutter_treeview实现树形视图，或自定义使用ListView/ExpansionTile递归构建。核心是数据结构和递归Widget，管理节点展开/折叠状态。

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


在Flutter中实现TreeView功能可以通过多种方式实现，以下是几种常见的方法：

1. 使用第三方库（推荐）

最常用的是 flutter_treeview 库：

dependencies:
  flutter_treeview: ^2.0.0

基本使用示例：

import 'package:flutter_treeview/flutter_treeview.dart';

class TreeViewExample extends StatefulWidget {
  @override
  _TreeViewExampleState createState() => _TreeViewExampleState();
}

class _TreeViewExampleState extends State<TreeViewExample> {
  final TreeViewController _controller = TreeViewController(
    children: [
      Node(
        key: '1',
        label: '父节点1',
        children: [
          Node(key: '1.1', label: '子节点1.1'),
          Node(key: '1.2', label: '子节点1.2'),
        ],
      ),
      Node(key: '2', label: '父节点2'),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return TreeView(
      controller: _controller,
      onExpansionChanged: (key, expanded) {
        setState(() {
          _controller = _controller.copyWith(expanded: expanded);
        });
      },
      onNodeTap: (key) {
        print('点击节点: $key');
      },
    );
  }
}

2. 自定义实现

使用ExpansionTile和ListView自定义：

class CustomTreeView extends StatelessWidget {
  final List<TreeNode> nodes;

  CustomTreeView({required this.nodes});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: nodes.length,
      itemBuilder: (context, index) => _buildNode(nodes[index]),
    );
  }

  Widget _buildNode(TreeNode node) {
    if (node.children.isEmpty) {
      return ListTile(
        title: Text(node.title),
        onTap: () => node.onTap?.call(),
      );
    }
    
    return ExpansionTile(
      title: Text(node.title),
      children: node.children.map(_buildNode).toList(),
    );
  }
}

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

  TreeNode({
    required this.title,
    this.children = const [],
    this.onTap,
  });
}

3. 其他可选库

  • expandable：提供可展开的widget
  • tree_view：另一个TreeView实现
  • flutter_staggered_animations：配合实现动画效果

推荐使用 flutter_treeview 库，它功能完善、文档清晰，支持节点选择、展开/收起状态管理等功能，能满足大部分TreeView需求。

回到顶部