搜尋套件、儲存庫與 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!

所屬分類

原始碼儲存庫

使用此套件的專案