? 可重排网格 ?

一个完整的可重排网格实现,类似于 Flutter 的 Reorderable_List,具有完整的 ReorderableGridViewReorderableGridSliverReorderableGrid 实现。

gif showing basic usage

? 工作原理

ReorderableGridView 是现有 GridView 的即插即用替代品,并添加了一个 onReorder 回调,该回调提供重排项的原始索引和新索引。

/// create a new list of data
final items = List<int>.generate(40, (index) => index);

/// when the reorder completes remove the list entry from its old position
/// and insert it at its new 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) {
          /// map every list entry to a widget and assure every child has a 
          /// unique key
          return Card(
            key: ValueKey(item),
            child: Center(
            child: Text(item.toString()),
            ),
          );
        }).toList(),
      ),
    ),
);
}

ReorderableGrid 提供了正常 GridView 的所有构造函数和参数。该包还包括:

  • ReorderableGridView,这是一个预构建的、类似 Material 的网格实现。
  • ReorderableGrid,一个基础小部件,允许您按照自己的意愿自定义网格。
  • SliverReorderableGrid,一个用于自定义滚动实现的可重排网格 Sliver。

? 参与其中

如果此包对您有用,请在 pub.dev 上点赞 ?,并在 github 上点星 ⭐。如果您有任何问题、建议或拉取请求,我很乐意看到它们!

GitHub

查看 Github