Flutter拖拽排序插件easy_drag_and_drop的使用

Flutter拖拽排序插件easy_drag_and_drop的使用

概览

该插件使拖放一组小部件变得更加简单。

使用方法

以下是一个简单的示例，展示如何使用EasyDragAndDrop插件来实现拖拽排序功能：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Easy Drag and Drop Demo')),
        body: DragAndDropDemo(),
      ),
    );
  }
}

class DragAndDropDemo extends StatefulWidget {
  @override
  _DragAndDropDemoState createState() => _DragAndDropDemoState();
}

class _DragAndDropDemoState extends State<DragAndDropDemo> {
  List<Widget> items = [
    FlutterLogo(size: 100),
    FlutterLogo(size: 100),
    FlutterLogo(size: 100),
  ];

  void onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = items.removeAt(oldIndex);
      items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: EasyDragAndDrop(
        items: items,
        onReorder: onReorder,
        width: 300,
        height: 300,
        initialPositions: List.generate(items.length, (index) => Offset(-100 + index * 50, 0)),
      ),
    );
  }
}

在上述代码中，我们创建了一个简单的Flutter应用，并使用了EasyDragAndDrop插件来实现拖拽排序功能。具体步骤如下：

1. 导入必要的库：

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

2. 定义主应用类：

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Easy Drag and Drop Demo')),
           body: DragAndDropDemo(),
         ),
       );
     }
   }
   

3. 定义状态类：

   class DragAndDropDemo extends StatefulWidget {
     @override
     _DragAndDropDemoState createState() => _DragAndDropDemoState();
   }
   
   class _DragAndDropDemoState extends State<DragAndDropDemo> {
     List<Widget> items = [
       FlutterLogo(size: 100),
       FlutterLogo(size: 100),
       FlutterLogo(size: 100),
     ];
   
     void onReorder(int oldIndex, int newIndex) {
       setState(() {
         if (newIndex > oldIndex) {
           newIndex -= 1;
         }
         final item = items.removeAt(oldIndex);
         items.insert(newIndex, item);
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.all(16.0),
         child: EasyDragAndDrop(
           items: items,
           onReorder: onReorder,
           width: 300,
           height: 300,
           initialPositions: List.generate(items.length, (index) => Offset(-100 + index * 50, 0)),
         ),
       );
     }
   }