套件詳情v0.0.2

reorderable_staggered_scroll_view

一個用於建立可重新排序的交錯網格檢視的 Flutter 套件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 94
喜歡數: 37
Pub 分數: 160

安裝套件

flutter pub add reorderable_staggered_scroll_view

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，讓使用者能夠建立具有順暢拖曳與放置互動的可重新排序交錯網格佈局。它透過允許在交錯網格中動態重新排列項目，擴展了標準捲動檢視的功能，非常適合自訂內容顯示，例如相片畫廊或任務清單。此套件支援所有主要平台，並能無縫整合至現有的 Flutter 專案中。

適用情境

可自定義的相簿
任務管理介面
動態內容排序
使用者驅動的佈局排列
互動式儀表板小部件

主要特色

拖曳重新排序
交錯網格佈局支援
跨平台相容性
重新排序時的平滑動畫
輕鬆整合至現有的 Flutter 應用程式

適合對象

開發互動式 UI 的開發者
需要動態項目排列的應用程式
包含視覺內容組織的專案
尋求直覺式拖曳手勢的使用者
針對多個平台的 Flutter 開發者

使用建議

需要小心處理項目鍵的唯一性
在大型資料集上可能會影響效能
需要適當的狀態管理來實現重新排序邏輯
除了基本的交錯行為外，自訂選項有限
最適合中等大小的集合

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

reorderable_staggered_scroll_view

A Flutter package for creating reorderable and draggable staggered grid and list views. This package provides a smooth and intuitive way to reorder items in both grid and list layouts, making it perfect for creating interactive and user-friendly applications.

List Demo	Grid Demo

Features

Reorder items with ease using drag and drop gestures.
Supports both staggered grid and list layouts.
Configurable drag-and-drop behavior.
Designed for a seamless user experience.

Getting Started

To use this package, add it to your pubspec.yaml file:

dependencies:
  reorderable_staggered_scroll_view: ^latest_version

Replace ^latest_version with the actual version you want to use.

Import the package in your Dart code:

import 'package:reorderable_staggered_scroll_view/reorderable_staggered_scroll_view.dart';

Usage

Grid

ReorderableStaggeredScrollView.grid(
  enable: _dragEnabled,
  padding: const EdgeInsets.all(16),
  scrollDirection: Axis.vertical,
  physics: const BouncingScrollPhysics(),
  crossAxisCount: 4,
  isLongPressDraggable: false,
  onDragEnd: (details, item) {
    print('onDragEnd: $details ${item.key}');
  },
  children: List.generate(
    10,
    (index) => ReorderableStaggeredScrollViewGridItem(
      key: ValueKey(index.toString()),
      mainAxisCellCount: 1,
      crossAxisCellCount: Random().nextInt(2) + 1,
      widget: Card(
        child: Center(child: Text('Item $index')),
      ),
    ),
  ),
);

List

For a list view of items use list constructor:

ReorderableStaggeredScrollView.list(
  ...
)

Custom

You can integrate the ReorderableStaggeredScrollView package with your custom list or grid widget by wrapping your custom list or grid widget with the necessary components.

DragNotification(
  child: ListView(
    scrollDirection: Axis.vertical,
    children: [
      DragContainer(
        scrollDirection: Axis.vertical,
        isLongPressDraggable: true,
        buildItems: (List<Widget> children) {
          return YourCustomListViewWidget(
            // Your custom list or grid widget configuration
            children: children,
          );
        },
        dataList: yourList, // Your List of ReorderableStaggeredScrollViewListItem or ReorderableStaggeredScrollViewGridItem
        items: (ReorderableStaggeredScrollViewListItem element, DraggableWidget draggableWidget) {
          // Map each item in your dataList into a draggable widget
          return Container(
            key: ValueKey(element.key.toString()),
            child: draggableWidget(element.widget),
          );
        }
      ),
    ],
  ),
);

Replace the comments with your actual widget configuration and data. This setup will allow you to use the ReorderableStaggeredScrollView package with your custom widget.

For more detailed usage instructions and configuration options, refer to the example directory in this repository.