Flutter可重排序网格插件reorderable_grid的使用

简介

Reorderable Grid 是一个功能强大的Flutter插件，提供了类似于Flutter内置ReorderableListView的全功能可重排序网格实现。它不仅包含了ReorderableGridView，还提供了ReorderableGrid和SliverReorderableGrid以满足不同的开发需求。

• Pub Version
• Likes
• Pub Points
• GitHub Stars
• Codecov

使用方法

ReorderableGridView

ReorderableGridView是GridView的一个直接替代品，并添加了一个onReorder回调，该回调提供被重新排序项的原始索引和新索引。

/// 创建一个新的数据列表
final items = List<int>.generate(40, (index) => index);

/// 当重新排序完成时，从旧位置移除列表条目并将其插入到新索引位置
void _onReorder(int oldIndex, int newIndex) {
  setState(() {
    final item = items.removeAt(oldIndex);
    items.insert(newIndex, item);
  });
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: ReorderableGridView.extent(
        maxCrossAxisExtent: 250,
        onReorder: _onReorder,
        childAspectRatio: 1,
        children: items.map((item) {
          /// 将每个列表条目映射为一个小部件，并确保每个子级都有唯一的键
          return Card(
            key: ValueKey(item),
            child: Center(
              child: Text(item.toString()),
            ),
          );
        }).toList(),
      ),
    ),
  );
}

ReorderableGrid 和 SliverReorderableGrid

• ReorderableGrid：一个基本的小部件，允许你根据需要自定义网格。
• SliverReorderableGrid：用于自定义滚动实现的可重排序网格sliver。

完整示例代码

以下是一个完整的示例应用程序，展示了如何在Flutter中使用reorderable_grid包：

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  /// 创建一个新的数据列表
  final items = List<int>.generate(40, (index) => index);

  /// 当重新排序完成时，从旧位置移除列表条目并将其插入到新索引位置
  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      final item = items.removeAt(oldIndex);
      items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Reorderable Grid Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ReorderableGridView.extent(
            maxCrossAxisExtent: 150,
            onReorder: _onReorder,
            onReorderStart: (index) => print('Reordering started at $index'),
            childAspectRatio: 1,
            children: items.map((item) {
              /// 将每个列表条目映射为一个小部件，并确保每个子级都有唯一的键
              return Card(
                key: ValueKey(item),
                color: Colors.primaries[item % Colors.primaries.length],
                child: Center(
                  child: Text(
                    'Item $item',
                    style: const TextStyle(fontSize: 16, color: Colors.white),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含40个项目的网格视图，每个项目都是一个带有唯一键的Card小部件。当用户拖动项目进行重新排序时，_onReorder方法会被调用，更新items列表的状态，从而触发UI的刷新。

如果你觉得这个插件对你有帮助，请在pub.dev上点赞，并在GitHub上给它一个星标。如果有任何问题或建议，欢迎提交Issue或Pull Request！