搜索插件、代码仓与 APP 分类

reorderable_grid 封面
插件详情v1.0.13

reorderable_grid

一个完整的可重新排序的网格实现,类似于 Flutter 原生的可重新排序列表。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1.4万
喜欢数
136
Pub 分数
150

安装插件

flutter pub add reorderable_grid

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,提供了一个功能完整的可重新排序网格,允许用户通过拖放来动态重新排列网格项。受 Flutter 原生 ReorderableListView 的启发,它支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。该网格保持流畅的动画效果,并高效处理触摸手势,非常适合用于自定义布局,如仪表板、相册或任务看板。它可无缝集成到现有的 Flutter 应用中,并提供简单的 API 以供自定义。

适合场景

  • 可自定义的仪表板布局
  • 照片或媒体图库重新排序
  • 基于任务或卡片的界面重新排列
  • 用户定义的控件布局
  • 基于网格的交互式数据管理

主要特点

  • 拖拽重排
  • 跨平台兼容性
  • 平滑的动画过渡
  • 灵活项目自定义
  • 内置手势处理

适合对象

  • 开发交互式网格界面的开发者
  • 需要用户驱动的布局自定义的应用程序
  • 具有动态内容组织的项目
  • 想要直观用户界面交互的设计人员
  • Flutter 应用程序针对多个平台

使用建议

  • 需要仔细处理状态管理
  • 在大数据集上可能影响性能
  • 触摸目标需要适当的内边距和间距
  • 有限的内置样式选项
  • 未针对极高的项目数量进行优化

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

:white_square_button: Reorderable Grid

Pub Version Likes Pub points Pub codecov

A full reorderable grid implemention similar to Flutters Reorderable_List. with full ReorderableGridView, ReorderableGrid and SliverReorderableGrid implementations

gif showing basic usage

:hammer: How it works

ReorderableGridView is a drop in replacement for the existing GridView and adds an onReorder callback that provides the original and new index of the reordered item.

/// 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 provides all the constructors and parameters the normal GridView has. The package also includes:

  • ReorderableGridView, which is a prebuild Material-ish implementation of the grid.
  • ReorderableGrid, A barebones widget that allows you to customize the grid however you want
  • SliverReorderableGrid, a reorderable grid sliver for custom scroll implementations

Documentation

You can find all features and fuctionality documented here

:wave: Get Involved

If this package is useful to you please :thumbsup: on pub.dev and :star: on github. If you have any Issues, recommendations or pull requests I'd love to see them!

所属分类

源码仓库

使用此插件的项目