Flutter拖拽操作插件flutter_easy_drag的使用

Flutter 拖拽操作插件 flutter_easy_drag 的使用

flutter_easy_drag 包为 Flutter 开发者提供了轻松实现任何小部件在应用程序中可拖拽的功能，提供了无缝且可定制的拖放体验。

特性

• 轻松实现任何小部件的拖放。
• 可通过多种选项自定义初始位置，如中心、顶中心、左中心、右中心、底中心、右上角、右下角、左上角、左下角或自定义坐标。
• 可调整拖动速度以控制移动流畅度。
• 简单直观的 API，易于集成。

示例

查看该包的实际效果。

![Preview GIF]

安装

要在 Flutter 项目中集成 flutter_easy_drag，请将包添加到 pubspec.yaml 文件中：

dependencies:
  flutter_easy_drag: ^latest_version

使用

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

// 在你的应用中使用
EasyDrag(
  height: 100,
  width: 100,
  dragSpeed: 3,
  initialPosition: InitialPosition.topCenter,
  child: Container(
    // 你的小部件在这里
  ),
)

自定义

• height: 指定可拖拽小部件的高度。
• width: 指定可拖拽小部件的宽度。
• dragSpeed: 控制拖动时小部件移动的速度（默认值为 3）。
• initialPosition: 设置小部件的初始位置。选项包括：
  • InitialPosition.center
  • InitialPosition.topCenter
  • InitialPosition.leftCenter
  • InitialPosition.rightCenter
  • InitialPosition.bottomCenter
  • InitialPosition.topRightCorner
  • InitialPosition.bottomRightCorner
  • InitialPosition.topLeftCorner
  • InitialPosition.bottomLeftCorner
  • InitialPosition.custom(left, top): 指定自定义坐标。

许可证: MIT

贡献

欢迎贡献此包！请查看仓库中的贡献指南。

反馈

您的反馈和建议非常宝贵！如果您有任何问题，请在 GitHub 上创建一个 issue。

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 flutter_easy_drag 插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  final double height = 100.0;
  final double width = 100.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              // 使用 EasyDrag 小部件
              EasyDrag(
                height: height,
                width: width,
                dragSpeed: 3,
                initialPosition: InitialPosition.center,
                child: Container(
                  height: height,
                  width: width,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
              // 其他小部件
            ],
          ),
        ),
      ),
    );
  }
}