Flutter列表项重排序插件reorderables2的使用

在Flutter中，reorderables2 是一个非常实用的插件，用于实现列表项的拖放重排序功能。无论是简单的列表还是复杂的表格，都可以通过该插件轻松实现元素的动态排序。

插件简介

reorderables2 提供了多种可重排序的Widget，包括：

• ReorderableSliverList（类似 SliverList）
• ReorderableTable（类似 Table）
• ReorderableWrap（类似 Wrap）
• ReorderableRow（类似 Row）
• ReorderableColumn（类似 Column）

这些Widget的核心功能是允许用户通过拖动重新排列其子项，并通过回调函数通知开发者具体的移动操作。

使用步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  reorderables2: ^最新版本号

然后运行以下命令安装依赖：

flutter pub get

2. 导入插件

在需要使用的 Dart 文件中导入插件：

import 'package:reorderables2/reorderables2.dart';

示例代码

以下是一个完整的示例代码，展示如何使用 ReorderableSliverList 实现列表项的拖放重排序。

示例代码：ReorderableSliverList

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reorderable SliverList Example',
      home: ReorderableSliverListPage(),
    );
  }
}

class ReorderableSliverListPage extends StatefulWidget {
  [@override](/user/override)
  _ReorderableSliverListPageState createState() =>
      _ReorderableSliverListPageState();
}

class _ReorderableSliverListPageState extends State<ReorderableSliverListPage> {
  List<String> _items = List.generate(10, (index) => 'Item $index');

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      String item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reorderable SliverList'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: 150.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Drag and Drop List'),
            ),
          ),
          ReorderableSliverList(
            delegate: ReorderableSliverChildListDelegate(
              _items.map((item) => ListTile(
                    key: Key(item),
                    title: Text(item),
                  )).toList(),
            ),
            onReorder: _onReorder,
          ),
        ],
      ),
    );
  }
}

效果图

其他示例

以下是其他几种常见用法的示例代码和效果图：

示例代码：ReorderableTable

class ReorderableTablePage extends StatefulWidget {
  [@override](/user/override)
  _ReorderableTablePageState createState() => _ReorderableTablePageState();
}

class _ReorderableTablePageState extends State<ReorderableTablePage> {
  List<ReorderableTableRow> _rows = [
    ReorderableTableRow(children: [Text('A'), Text('B')]),
    ReorderableTableRow(children: [Text('C'), Text('D')]),
  ];

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      ReorderableTableRow row = _rows.removeAt(oldIndex);
      _rows.insert(newIndex, row);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reorderable Table'),
      ),
      body: ReorderableTable(
        header: Row(
          children: [Text('Col 1'), Text('Col 2')],
        ),
        children: _rows,
        onReorder: _onReorder,
      ),
    );
  }
}

效果图

示例代码：ReorderableWrap

class ReorderableWrapPage extends StatefulWidget {
  [@override](/user/override)
  _ReorderableWrapPageState createState() => _ReorderableWrapPageState();
}

class _ReorderableWrapPageState extends State<ReorderableWrapPage> {
  List<Widget> _tiles = [
    Icon(Icons.star, size: 50),
    Icon(Icons.favorite, size: 50),
    Icon(Icons.bookmark, size: 50),
  ];

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      Widget tile = _tiles.removeAt(oldIndex);
      _tiles.insert(newIndex, tile);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reorderable Wrap'),
      ),
      body: ReorderableWrap(
        spacing: 10,
        runSpacing: 10,
        children: _tiles,
        onReorder: _onReorder,
      ),
    );
  }
}