Flutter拖拽排序网格视图插件drag_and_drop_gridview的使用

Flutter拖拽排序网格视图插件drag_and_drop_gridview的使用

概述

drag_and_drop_gridview 是一个强大的 Flutter 插件，它扩展了 GridView 的功能，允许用户通过简单的拖放操作对网格视图中的项目进行重新排序。此插件易于实现且界面美观。

如果你喜欢本内容，请支持项目的可见性，点赞、收藏或赞赏！

使用方法

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  drag_and_drop_gridview: ^1.0.8

然后在代码中导入该包：

import 'package:drag_and_drop_gridview/devdrag.dart';

示例代码

示例 1: 基本用法

import 'package:drag_and_drop_gridview/devdrag.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drag And Drop GridView')),
        body: DragAndDropGridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 3 / 4.5,
          ),
          padding: EdgeInsets.all(20),
          itemBuilder: (context, index) => Card(
            elevation: 2,
            child: Text('Item $index'),
          ),
          itemCount: 10,
          onWillAccept: (oldIndex, newIndex) => true,
          onReorder: (oldIndex, newIndex) {
            print('Old Index: $oldIndex, New Index: $newIndex');
          },
        ),
      ),
    );
  }
}

结果：

示例 2: 水平方向可重排

import 'package:drag_and_drop_gridview/devdrag.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Horizontal Drag And Drop GridView')),
        body: DragAndDropGridView.horizontal(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 5,
            childAspectRatio: 3 / 4.5,
          ),
          padding: EdgeInsets.all(20),
          itemBuilder: (context, index) => Card(
            elevation: 2,
            child: Text('Item $index'),
          ),
          itemCount: 10,
          onWillAccept: (oldIndex, newIndex) => true,
          onReorder: (oldIndex, newIndex) {
            print('Old Index: $oldIndex, New Index: $newIndex');
          },
        ),
      ),
    );
  }
}

结果：

示例 3: 垂直方向可重排

import 'package:drag_and_drop_gridview/devdrag.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Vertical Drag And Drop GridView')),
        body: DragAndDropGridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 3 / 4.5,
          ),
          padding: EdgeInsets.all(20),
          itemBuilder: (context, index) => Card(
            elevation: 2,
            child: Text('Item $index'),
          ),
          itemCount: 10,
          onWillAccept: (oldIndex, newIndex) => true,
          onReorder: (oldIndex, newIndex) {
            print('Old Index: $oldIndex, New Index: $newIndex');
          },
        ),
      ),
    );
  }
}

结果：

参数详解

gridDelegate

定义网格布局的方式，例如列数和宽高比。

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  childAspectRatio: 3 / 4.5,
),

itemBuilder

用于生成每个网格项的子部件。

itemBuilder: (context, index) => Card(
  elevation: 2,
  child: Text('Item $index'),
),

onWillAccept

验证是否接受拖动目标。

onWillAccept: (oldIndex, newIndex) {
  if (_imageUris[newIndex] == "something") {
    return false;
  }
  return true;
},

onReorder

处理重新排序后的逻辑。

onReorder: (oldIndex, newIndex) {
  final temp = _imageUris[oldIndex];
  _imageUris[oldIndex] = _imageUris[newIndex];
  _imageUris[newIndex] = temp;
  setState(() {});
},

其他功能

1. 非粘性头部

header: Container(
  height: 50,
  width: double.infinity,
  alignment: Alignment.center,
  color: Colors.amber,
  child: Text("Header"),
),

2. 粘性头部（水平）

DragAndDropGridView.horizontalStickyHeader(
  itemBuilderHeader: (context, pos) => Card(
    elevation: 2,
    child: Text("${listOfHeader[pos]}"),
  ),
  headerItemCount: 5,
  ...
)

3. 自定义拖拽反馈

isCustomFeedback: true,
feedback: (pos) => Image.asset("gifs/draganddropbg.jpg"),