Flutter如何实现TreeView组件

在Flutter中如何实现一个可展开折叠的TreeView组件？目前官方没有提供原生支持，请问有哪些推荐的第三方库或自定义实现方案？需要支持动态数据加载、节点图标自定义和点击事件处理，最好能兼容移动端和Web平台。求具体代码示例或实现思路。

2 回复

Flutter没有内置TreeView组件，可通过以下方式实现：

  1. 使用第三方库：如flutter_treeview
  2. 自定义实现：使用ListView/ExpansionTile递归构建
  3. 数据驱动：通过树形数据结构控制展开/收起状态

推荐使用flutter_treeview库，简单易用，支持展开/收起、图标等功能。

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


在Flutter中，可以通过多种方式实现TreeView组件，以下是两种常用方法：

方法一：使用第三方库（推荐）

最常用的是flutter_treeview库：

  1. 添加依赖
dependencies:
  flutter_treeview: ^2.0.0
  1. 基本使用示例
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,
      onNodeTap: (key) {
        setState(() {
          _controller = _controller.copyWith(selectedKey: key);
        });
      },
    );
  }
}

方法二：自定义递归组件

如果不想依赖第三方库，可以自己实现：

class TreeNode {
  final String title;
  final List<TreeNode> children;
  bool isExpanded;

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

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

  const CustomTreeView({Key? key, required this.nodes}) : super(key: key);

  @override
  _CustomTreeViewState createState() => _CustomTreeViewState();
}

class _CustomTreeViewState extends State<CustomTreeView> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      itemCount: widget.nodes.length,
      itemBuilder: (context, index) {
        return _buildTreeNode(widget.nodes[index]);
      },
    );
  }

  Widget _buildTreeNode(TreeNode node) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ListTile(
          title: Text(node.title),
          trailing: node.children.isNotEmpty
              ? Icon(node.isExpanded
                  ? Icons.expand_less
                  : Icons.expand_more)
              : null,
          onTap: () {
            setState(() {
              node.isExpanded = !node.isExpanded;
            });
          },
        ),
        if (node.isExpanded && node.children.isNotEmpty)
          Padding(
            padding: EdgeInsets.only(left: 16.0),
            child: CustomTreeView(nodes: node.children),
          ),
      ],
    );
  }
}

使用建议

  • 推荐使用第三方库：flutter_treeview功能更完善，支持选择状态、图标、搜索等
  • 自定义实现：适合简单需求或需要高度定制化的场景
  • 性能考虑：对于大数据量的树结构，建议使用ListView.builder确保性能

这两种方法都能很好地实现TreeView功能，根据项目需求选择合适的方式即可。

回到顶部