Flutter注解树形结构插件annotated_trie的使用

当然，下面是一个关于如何在Flutter中使用annotated_tree插件来创建和显示树形结构的示例代码。annotated_tree是一个有用的插件，它允许你以注解的方式在Flutter应用中构建和展示树形结构。

首先，确保你已经在你的pubspec.yaml文件中添加了annotated_tree依赖：

dependencies:
  flutter:
    sdk: flutter
  annotated_tree: ^0.x.x  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的示例，展示了如何使用annotated_tree插件来创建一个简单的树形结构：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Annotated Tree Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Annotated Tree Example'),
        ),
        body: AnnotatedTreeExample(),
      ),
    );
  }
}

class AnnotatedTreeExample extends StatelessWidget {
  final List<AnnotatedTreeNode> treeData = [
    AnnotatedTreeNode(
      id: 'root',
      title: 'Root Node',
      children: [
        AnnotatedTreeNode(
          id: 'child1',
          title: 'Child Node 1',
          children: [
            AnnotatedTreeNode(id: 'child1.1', title: 'Child Node 1.1'),
            AnnotatedTreeNode(id: 'child1.2', title: 'Child Node 1.2'),
          ],
        ),
        AnnotatedTreeNode(
          id: 'child2',
          title: 'Child Node 2',
          children: [
            AnnotatedTreeNode(id: 'child2.1', title: 'Child Node 2.1'),
          ],
        ),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return AnnotatedTree(
      nodes: treeData,
      nodeBuilder: (context, node) {
        return ListTile(
          title: Text(node.title),
          trailing: Icon(
            node.expanded ? Icons.expand_more : Icons.chevron_right,
          ),
        );
      },
      onNodeTap: (node) {
        // 可以在这里处理节点点击事件
        print('Node tapped: ${node.title}');
      },
    );
  }
}

class AnnotatedTreeNode {
  final String id;
  final String title;
  final List<AnnotatedTreeNode>? children;
  bool expanded = false;

  AnnotatedTreeNode({
    required this.id,
    required this.title,
    this.children,
  });
}

代码解释：

1. 依赖添加：在pubspec.yaml中添加annotated_tree依赖。

2. 创建AnnotatedTreeNode类：

   • id：每个节点的唯一标识符。
   • title：节点的显示标题。
   • children：子节点列表（可选）。
   • expanded：用于跟踪节点是否展开（虽然annotated_tree插件本身不提供展开/收起功能，但你可以手动管理这个状态）。

3. 构建树形结构：

   • 在AnnotatedTreeExample类中，创建了一个包含多个AnnotatedTreeNode的treeData列表。

4. 使用AnnotatedTree组件：

   • nodes：传入节点数据。
   • nodeBuilder：构建每个节点的Widget。
   • onNodeTap：处理节点点击事件（这里只是打印了节点标题）。

注意：annotated_tree插件本身并不直接提供展开/收起功能。如果你需要这个功能，你可能需要自定义逻辑来管理expanded状态，并在nodeBuilder中相应地调整UI。上面的示例仅展示了如何使用注解的方式构建树形结构并显示节点。