Flutter动画树视图插件animated_tree_view的使用

animated_tree_view 是一个Flutter包，它提供了一种分层树状数据结构，可以将其可视化为线性列表视图。该组件基于Flutter熟悉的API AnimatedList 和 SliverAnimatedList，并且支持移动、Web和桌面平台。

功能特性

• 支持无限层级和子节点。
• 节点展开和折叠时带有动画效果。
• 可自定义缩进和范围线。
• 提供添加、插入、移除以及展开/折叠节点的实用方法。
• 可以轻松地横向或纵向遍历树。
• 树差异工具（Tree Diff Util）用于计算两棵树之间的差异，并自动应用到树视图中。
• 使用 ValueNotifier 和事件流监听变化。
• 支持RTL布局。

如何使用

TreeView.simple 示例

TreeView.simple(
  tree: TreeNode.root(),
  builder: (context, node) {
    return ListTile(
      title: Text("Item ${node.level}-${node.key}"),
      subtitle: Text('Level ${node.level}'),
    );
  }
)

TreeView.indexed 示例

TreeView.indexed(
  tree: IndexedTreeNode.root(),
  builder: (context, node) {
    return ListTile(
      title: Text("Item ${node.level}-${node.key}"),
      subtitle: Text('Level ${node.level}'),
    );
  }
)

TreeView.simpleTyped 示例

TreeView.simpleTyped<CustomClass, TreeNode<CustomClass>>(
  tree: TreeNode<CustomClass>.root(),
  builder: (context, node) {
    return ListTile(
        title: Text("Item ${node.level}-${node.key}"),
        subtitle: Text('Level ${node.data?.foo}')
    );
  }     
)

SliverTreeView 示例

CustomScrollView(
  slivers: [
    SliverTreeView.simple(
      tree: TreeNode.root(),
      builder: (context, node) {
        return ListTile(
          title: Text("Item ${node.level}-${node.key}"),
          subtitle: Text('Level ${node.level}'),
        );
      },
    ),
  ],
);

配置与行为

完整示例代码

下面是一个完整的示例，展示了如何创建一个简单的动画树形视图：

import 'package:animated_tree_view/animated_tree_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Animated Tree Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Simple Animated Tree Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

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

class _MyHomePageState extends State<MyHomePage> {
  TreeViewController? _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          if (sampleTree.isExpanded) {
            _controller?.collapseNode(sampleTree);
          } else {
            _controller?.expandAllChildren(sampleTree);
          }
        },
        label: ValueListenableBuilder<bool>(
          valueListenable: sampleTree.expansionNotifier,
          builder: (context, isExpanded, _) {
            return Text(isExpanded ? "Collapse all" : "Expand all");
          },
        ),
      ),
      body: TreeView.simple(
        tree: sampleTree,
        showRootNode: true,
        expansionIndicatorBuilder: (context, node) =>
            ChevronIndicator.rightDown(
              tree: node,
              color: Colors.blue[700],
              padding: const EdgeInsets.all(8),
            ),
        indentation: const Indentation(style: IndentStyle.roundJoint),
        onItemTap: (item) {
          print("Item tapped: ${item.key}");
        },
        onTreeReady: (controller) {
          _controller = controller;
          controller.expandAllChildren(sampleTree);
        },
        builder: (context, node) => Card(
          child: ListTile(
            title: Text("Item ${node.level}-${node.key}"),
            subtitle: Text('Level ${node.level}'),
          ),
        ),
      ),
    );
  }
}

final sampleTree = TreeNode.root()
  ..addAll([
    TreeNode(key: "0A")..add(TreeNode(key: "0A1A")),
    TreeNode(key: "0C")
      ..addAll([
        TreeNode(key: "0C1A"),
        TreeNode(key: "0C1B"),
        TreeNode(key: "0C1C")
          ..addAll([
            TreeNode(key: "0C1C2A")
              ..addAll([
                TreeNode(key: "0C1C2A3A"),
                TreeNode(key: "0C1C2A3B"),
                TreeNode(key: "0C1C2A3C"),
              ]),
          ]),
      ]),
    TreeNode(key: "0D"),
    TreeNode(key: "0E"),
  ]);

此代码片段演示了如何创建一个包含多个层级的树形结构，并通过 TreeView.simple 小部件将其渲染为可交互的UI元素。您可以根据需要调整配置选项以适应特定的应用场景。