Flutter拖拽网格布局插件dragablegridview_flutter的使用

插件简介

dragablegridview_flutter 是一个基于 GridView 实现的可拖动排序布局组件。用户可以通过长按某个项目触发拖动操作，释放手指后即可完成排序。此外，该插件还支持删除动画，用户可以根据需求选择是否启用拖动动画或删除动画。

GitHub 地址:
https://github.com/baoolong/DragableGridview

效果展示:

dragablegridview_flutter的使用步骤

1. 添加依赖

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

dependencies:
  dragablegridview_flutter: ^0.2.5

然后运行 flutter pub get 更新依赖。

2. 导入包

在 Dart 文件中导入以下包：

import 'package:dragablegridview_flutter/dragablegridview_flutter.dart';
import 'package:dragablegridview_flutter/dragablegridviewbin.dart';

3. 创建数据模型

数据模型必须继承自 DragAbleGridViewBin，用于存储每个项目的详细信息。

import 'package:dragablegridview_flutter/dragablegridviewbin.dart';

class ItemBin extends DragAbleGridViewBin {
  ItemBin(this.data);

  final String data;

  [@override](/user/override)
  String toString() {
    return 'ItemBin{data: $data, '
           'dragPointX: $dragPointX, dragPointY: $dragPointY, '
           'lastTimePositionX: $lastTimePositionX, lastTimePositionY: $lastTimePositionY, '
           'containerKey: $containerKey, containerKeyChild: $containerKeyChild, '
           'isLongPress: $isLongPress, dragAble: $dragAble}';
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用 dragablegridview_flutter 实现拖拽网格布局。

import 'package:flutter/material.dart';
import 'package:dragablegridview_flutter/dragablegridview_flutter.dart';
import 'package:dragablegridview_flutter/dragablegridviewbin.dart';

// 数据模型类
class ItemBin extends DragAbleGridViewBin {
  ItemBin(this.data);

  final String data;

  [@override](/user/override)
  String toString() {
    return 'ItemBin{data: $data, '
           'dragPointX: $dragPointX, dragPointY: $dragPointY, '
           'lastTimePositionX: $lastTimePositionX, lastTimePositionY: $lastTimePositionY, '
           'containerKey: $containerKey, containerKeyChild: $containerKeyChild, '
           'isLongPress: $isLongPress, dragAble: $dragAble}';
  }
}

// 主页面
class DragAbleGridViewDemo extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return new DragAbleGridViewDemoState();
  }
}

class DragAbleGridViewDemoState extends State<DragAbleGridViewDemo> {
  List<ItemBin> itemBins = [];
  String actionTxtEdit = "编辑";
  String actionTxtComplete = "完成";
  String actionTxt;
  var editSwitchController = EditSwitchController();
  final List<String> heroes = [
    "鲁班", "虞姬", "甄姬", "黄盖", "张飞", "关羽", "刘备", "曹操", "赵云",
    "孙策", "庄周", "廉颇", "后裔", "妲己", "荆轲"
  ];

  [@override](/user/override)
  void initState() {
    super.initState();
    actionTxt = actionTxtEdit;
    heroes.forEach((heroName) {
      itemBins.add(new ItemBin(heroName));
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("可拖拽GridView"),
        actions: <Widget>[
          Center(
            child: GestureDetector(
              child: Container(
                child: Text(actionTxt, style: TextStyle(fontSize: 19.0)),
                margin: EdgeInsets.only(right: 12),
              ),
              onTap: () {
                changeActionState();
                editSwitchController.editStateChanged();
              },
            ),
          )
        ],
      ),
      body: DragAbleGridView(
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 1.8,
        crossAxisCount: 4,
        itemBins: itemBins,
        editSwitchController: editSwitchController,
        // 新增参数
        isOpenDragAble: true,
        animationDuration: 300, // 动画持续时间（毫秒）
        longPressDuration: 800, // 长按触发拖动的时长（毫秒）
        deleteIcon: Image.asset(
          "images/close.png",
          width: 15.0,
          height: 15.0,
        ),
        child: (int position) {
          return Container(
            padding: EdgeInsets.fromLTRB(8.0, 5.0, 8.0, 5.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(3.0)),
              border: Border.all(color: Colors.blue),
            ),
            // 设置删除图标的位置
            margin: EdgeInsets.only(top: 6.0, right: 6.0),
            child: Text(
              itemBins[position].data,
              style: TextStyle(fontSize: 16.0, color: Colors.blue),
            ),
          );
        },
        editChangeListener: () {
          changeActionState();
        },
      ),
    );
  }

  void changeActionState() {
    if (actionTxt == actionTxtEdit) {
      setState(() {
        actionTxt = actionTxtComplete;
      });
    } else {
      setState(() {
        actionTxt = actionTxtEdit;
      });
    }
  }
}