Flutter如何实现animated_tree_view动画树视图

在Flutter中如何实现类似animated_tree_view的动画树形视图？我想在项目中展示一个可展开/折叠的层级结构，并且希望节点展开时有平滑的动画效果。目前尝试过使用ExpansionTile，但动画效果不够流畅，而且自定义样式比较困难。请问有没有推荐的第三方库或者实现方案？最好能支持自定义节点样式和动画参数。

2 回复

在Flutter中实现动画树视图，可以使用animated_tree_view第三方库。步骤如下：

  1. 添加依赖：
dependencies:
  animated_tree_view: ^2.0.0
  1. 基本用法：
// 创建树节点
var root = TreeNode<String>(key: "root", data: "Root");

// 添加子节点
root.addAll([
  TreeNode<String>(key: "child1", data: "Child 1"),
  TreeNode<String>(key: "child2", data: "Child 2"),
]);

// 在UI中使用
TreeView(
  node: root,
  expansionBehavior: ExpansionBehavior.scrollToLastChild,
  builder: (context, node) {
    return ListTile(
      title: Text(node.data),
    );
  },
)
  1. 支持动画展开/折叠：
  • 使用AnimatedTreeView替代TreeView
  • 内置默认动画效果
  • 可自定义动画时长和曲线
  1. 高级功能：
  • 支持节点增删动画
  • 可自定义节点缩进
  • 支持搜索和过滤
  • 多种展开模式可选

这个库提供了完整的树形结构展示和流畅的动画效果，适合文件目录、组织架构等场景。

更多关于Flutter如何实现animated_tree_view动画树视图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现动画树视图，可以使用animated_tree_view第三方库，它专门为树形结构数据提供了展开/折叠动画效果。

安装依赖

在pubspec.yaml中添加：

dependencies:
  animated_tree_view: ^2.1.0

基本实现步骤

1. 定义树节点

import 'package:animated_tree_view/animated_tree_view.dart';

// 创建树节点
final tree = TreeNode<Map<String, dynamic>>()
  ..addAll([
    TreeNode<Map<String, dynamic>>(key: "1", data: {"title": "节点1"})
      ..addAll([
        TreeNode<Map<String, dynamic>>(key: "1.1", data: {"title": "子节点1.1"}),
        TreeNode<Map<String, dynamic>>(key: "1.2", data: {"title": "子节点1.2"})
          ..add(TreeNode<Map<String, dynamic>>(key: "1.2.1", data: {"title": "孙子节点1.2.1"})),
      ]),
    TreeNode<Map<String, dynamic>>(key: "2", data: {"title": "节点2"}),
  ]);

2. 创建树视图

class AnimatedTreeExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("动画树视图")),
      body: TreeView.simple(
        tree: tree,
        expansionBehavior: ExpansionBehavior.scrollToLastChild,
        showRootNode: true,
        builder: (context, node) {
          return ListTile(
            title: Text(node.data!["title"]),
            onTap: () => node.isExpanded 
              ? node.collapse() 
              : node.expand(),
          );
        },
      ),
    );
  }
}

自定义样式和动画

使用IndentTreeView控制缩进

TreeView.indent(
  tree: tree,
  expansionBehavior: ExpansionBehavior.none,
  indent: 20.0,
  showRootNode: false,
  builder: (context, node) => Card(
    child: ListTile(
      leading: Icon(node.isLeaf ? Icons.insert_drive_file : Icons.folder),
      title: Text(node.data!["title"]),
      trailing: node.isLeaf ? null : Icon(
        node.isExpanded ? Icons.expand_less : Icons.expand_more
      ),
      onTap: () => node.isExpanded 
        ? node.collapse() 
        : node.expand(),
    ),
  ),
)

主要特性

  • 平滑动画：展开/折叠时有流畅的动画效果
  • 多种布局：支持简单列表和缩进树形布局
  • 自定义节点：可以完全自定义每个节点的显示样式
  • 状态管理：自动管理节点的展开/折叠状态

这个库提供了简单易用的API，可以快速实现带有动画效果的树形视图。

回到顶部