Flutter可重排序网格视图插件reorderable_grid_view的使用

reorderable_grid_view 是一个用于在Flutter中实现可拖拽和重新排序的网格视图插件。本文将介绍如何使用这个插件，并提供完整的示例代码。

添加依赖

首先，在你的 pubspec.yaml 文件中添加 reorderable_grid_view 依赖：

dependencies:
  reorderable_grid_view: ^2.2.6

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

示例代码

以下是一个简单的示例，展示了如何使用 ReorderableGridView.count 创建一个可重排序的网格视图：

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<int> data = [1, 2, 3, 4, 5];

  Widget buildItem(String text) {
    return Card(
      key: ValueKey(text),
      child: Center(child: Text(text)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ReorderableGridView.count(
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          children: data.map((e) => buildItem("$e")).toList(),
          onReorder: (oldIndex, newIndex) {
            setState(() {
              if (newIndex > oldIndex) {
                newIndex -= 1;
              }
              final item = data.removeAt(oldIndex);
              data.insert(newIndex, item);
            });
          },
          footer: [
            Card(
              child: Center(
                child: Icon(Icons.add),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键点解释

• ReorderableGridView.count: 使用 count 构造函数来指定网格的列数。
• onReorder: 当用户拖动并释放项目时调用的回调函数，用于更新数据列表。
• footer: 可选参数，用于在网格底部添加额外的小部件（如“添加”按钮）。

其他选项

reorderable_grid_view 提供了一些额外的选项来定制行为：

例如，你可以通过 dragWidgetBuilderV2 自定义拖动时显示的小部件：

dragWidgetBuilderV2: DragWidgetBuilderV2(
  isScreenshotDragWidget: false,
  builder: (index, child, screenshot) {
    return child; // 返回原始小部件
  }
)

如果需要截屏作为拖动时显示的小部件：

dragWidgetBuilderV2: DragWidgetBuilderV2(
  isScreenshotDragWidget: true,
  builder: (index, child, screenshot) {
    return Image(screenshot); // 返回截屏图像
  }
)