Flutter嵌套可重排序列表插件nested_reorderable_list的使用

当然，下面是一个关于如何使用 nested_reorderable_list 插件的 Flutter 代码示例。这个插件允许你创建嵌套的可重排序列表。首先，确保你已经在你的 pubspec.yaml 文件中添加了 nested_reorderable_list 依赖：

dependencies:
  flutter:
    sdk: flutter
  nested_reorderable_list: ^x.y.z  # 替换为最新版本号

然后，你可以在你的 Dart 文件中使用以下代码来创建一个嵌套的可重排序列表：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Nested Reorderable List Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NestedListScreen(),
    );
  }
}

class NestedListScreen extends StatefulWidget {
  @override
  _NestedListScreenState createState() => _NestedListScreenState();
}

class _NestedListScreenState extends State<NestedListScreen> {
  final List<ReorderableNode<String>> initialData = [
    ReorderableNode<String>(
      key: ValueKey('1'),
      data: 'Item 1',
      children: [
        ReorderableNode<String>(
          key: ValueKey('1.1'),
          data: 'Item 1.1',
        ),
        ReorderableNode<String>(
          key: ValueKey('1.2'),
          data: 'Item 1.2',
        ),
      ],
    ),
    ReorderableNode<String>(
      key: ValueKey('2'),
      data: 'Item 2',
      children: [
        ReorderableNode<String>(
          key: ValueKey('2.1'),
          data: 'Item 2.1',
        ),
      ],
    ),
  ];

  List<ReorderableNode<String>> nestedList = List.from(initialData);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nested Reorderable List'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: NestedReorderableListView<String>(
          nodes: nestedList,
          onReorder: (List<ReorderableNode<String>> newOrder) {
            setState(() {
              nestedList = newOrder;
            });
          },
          buildItem: (BuildContext context, ReorderableNode<String> node, int index) {
            return ListTile(
              title: Text(node.data),
              trailing: Icon(Icons.drag_handle),
            );
          },
          buildChildList: (BuildContext context, ReorderableNode<String> node) {
            return NestedReorderableListView<String>(
              nodes: node.children,
              onReorder: (List<ReorderableNode<String>> newOrder) {
                setState(() {
                  node.children = newOrder;
                });
              },
              buildItem: (BuildContext context, ReorderableNode<String> childNode, int index) {
                return ListTile(
                  title: Text(childNode.data),
                  trailing: Icon(Icons.drag_handle),
                );
              },
              buildChildList: null, // 不再嵌套
            );
          },
        ),
      ),
    );
  }
}

在这个示例中：

1. NestedListScreen 是一个包含嵌套列表的 StatefulWidget。
2. initialData 是一个包含初始数据的 List<ReorderableNode<String>>。每个 ReorderableNode 可以包含子节点，形成嵌套结构。
3. nestedList 是从 initialData 创建的列表副本，用于在 UI 中显示和修改。
4. NestedReorderableListView 是一个自定义的嵌套可重排序列表视图。它接受 nodes（节点列表）和 onReorder（节点重排序时的回调）。
5. buildItem 函数定义了每个节点的 UI。这里使用了简单的 ListTile，并在尾部添加了一个拖动句柄图标。
6. buildChildList 函数定义了如何构建子列表。在这个例子中，当节点有子节点时，它会递归地创建一个新的 NestedReorderableListView。

这个示例展示了如何使用 nested_reorderable_list 插件来创建一个简单的嵌套可重排序列表。你可以根据需要自定义节点的 UI 和行为。