套件詳情v2.0.1

reorderableitemsview

一個支援排序的Flutter分欄網格視圖或ListView套件

pub.dev API 文件原始碼

近 30 天下載: 186
喜歡數: 55
Pub 分數: 60

安裝套件

flutter pub add reorderableitemsview

套件介紹

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

一個 Flutter 套件，可實現具有平滑拖曳功能的可重新排序交錯網格或清單檢視。它擴展標準的 ListView 和 GridView，支援動態重新排列項目，非常適合任務清單、圖片畫廊或任何需要使用者驅動項目重新排列的 UI。該套件輕量且可無縫整合至現有的 Flutter 項目中。支援垂直和水平佈局，並提供回呼函數以處理重新排序事件。

適用情境

拖放任務管理
可重新排序的圖片畫廊
可自訂的產品清單
互動式內容排序
動態表單欄位排列

主要特色

交錯網格佈局支援
流暢的拖曳排序
重新排序事件的回調
支援垂直與水平佈局
輕量級且易於整合

適合對象

開發互動式清單的開發者
需要可排序 UI 元件的應用程式
具有動態項目排序的專案
具有拖曳手勢的UI密集型應用
Flutter 初學者探索進階組件

使用建議

僅限基本重新排序，無動畫效果
訂單變更無內建持久化
需要手動管理已儲存訂單的狀態
未針對超大資料集進行優化
原生不支援巢狀重新排序

原始 README

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

reorderableitemsview

A Flutter package for staggered grid view or ListView with ordering support

Info

This plugin uses most for its code from ReorderableListView

This Plugin combines the ReorderableListView and flutter_staggered_grid_view to provide Draggable behaviour for Staggered GridView

Usage

To use this plugin, add reorderableitemsview as a dependency in your pubspec.yaml file.

Example Staggered GridView

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

class GridPageView extends StatefulWidget {
  @override
  _GridPageViewState createState() => _GridPageViewState();
}

class _GridPageViewState extends State<GridPageView> {

  List<StaggeredTileExtended> _listStaggeredTileExtended = <StaggeredTileExtended>[
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(2, 1),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(2, 2),
    StaggeredTileExtended.count(1, 2),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(3, 1),
    StaggeredTileExtended.count(1, 1),
    StaggeredTileExtended.count(4, 1),
  ];

  List<Widget> _tiles = <Widget>[
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("List Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        children: _tiles,
        crossAxisCount: 4,
        isGrid: true,
        staggeredTiles: _listStaggeredTileExtended,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Example ListView

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

class ListPageView extends StatefulWidget {
  @override
  _ListPageViewState createState() => _ListPageViewState();
}

class _ListPageViewState extends State<ListPageView> {

  List<Widget> _tiles = <Widget>[
    _Example01Tile(Key("a"),Colors.green, Icons.widgets),
    _Example01Tile(Key("b"),Colors.lightBlue, Icons.wifi),
    _Example01Tile(Key("c"),Colors.amber, Icons.panorama_wide_angle),
    _Example01Tile(Key("d"),Colors.brown, Icons.map),
    _Example01Tile(Key("e"),Colors.deepOrange, Icons.send),
    _Example01Tile(Key("f"),Colors.indigo, Icons.airline_seat_flat),
    _Example01Tile(Key("g"),Colors.red, Icons.bluetooth),
    _Example01Tile(Key("h"),Colors.pink, Icons.battery_alert),
    _Example01Tile(Key("i"),Colors.purple, Icons.desktop_windows),
    _Example01Tile(Key("j"),Colors.blue, Icons.radio),
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("List Demo"),
      ),
      body: ReorderableItemsView(
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            _tiles.insert(newIndex, _tiles.removeAt(oldIndex));
          });
        },
        feedBackWidgetBuilder: (context, index, child) {
          return Container(
            child: child,
          );
        },
        children: _tiles,
        longPressToDrag: false,
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  _Example01Tile(Key key, this.backgroundColor, this.iconData): super(key: key);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return new Card(
      color: backgroundColor,
      child: new InkWell(
        onTap: () {},
        child: new Center(
          child: new Padding(
            padding: EdgeInsets.all(4.0),
            child: new Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

Options

@required this.children, // List<Widget>
@required this.onReorder, // Callback onReorder(int oldIndex, int newIndex)
this.scrollController, // ScrollController
this.scrollDirection = Axis.vertical, // Axis Ignored in GridView
this.padding, 
this.staggeredTiles, // Only used in GridView, check gridview example above
this.crossAxisCount = 3, // Only used in GridView
this.isGrid = false, // if true renders as gridview
this.reverse = false,
this.longPressToDrag = true,
this.mainAxisSpacing = 0.0, // Only used in GridView
this.crossAxisSpacing = 0.0, // Only used in GridView
this.feedBackWidgetBuilder,