Flutter拖拽功能插件easy_draggable的使用

Flutter拖拽功能插件easy_draggable的使用

EasyDraggableWidget介绍

EasyDraggableWidget 是一个 Flutter 插件，允许你轻松创建屏幕上的可拖拽浮动控件。该插件提供了直观的拖放功能以及碰撞检测、自动对齐等额外功能。

使用说明

要使用 EasyDraggableWidget，请按照以下步骤操作：

1. 将 easy_draggable 包添加到你的 pubspec.yaml 文件中：

dependencies:
  easy_draggable: <版本号>

1. 导入必要的包：

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

1. 创建一个 EasyDraggableWidget 的实例，并提供所需的参数：

EasyDraggableWidget(
  padding: EdgeInsets.zero,
  floatingBuilder: (context, constraints) {
    // 返回浮动控件的内容
    // 这个构建函数将在需要重建时被调用。
  },
  // 设置其他可选参数
)

参数说明

EasyDraggableWidget 构造函数接受以下参数：

注意：你只需要指定 left 或 right，以及 top 或 bottom 中的一个作为初始状态。同时提供 left 和 right，或 top 和 bottom 是不必要的。

示例代码

下面是一个如何使用 EasyDraggableWidget 的的示例：

EasyDraggableWidget(
  padding: const EdgeInsets.all(16),
  floatingBuilder: (context, constraints) {
    return Container(
      width: 150,
      height: 200,
      color: Colors.blue,
      child: const Center(
        child: Text(
          'Drag me!',
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  },
),

这个示例创建了一个可拖动的蓝色容器，内部有居中的文本。你可以通过自定义 floatingBuilder 函数来定制浮动控件的内容。

完整示例代码

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  // 这个 widget 是应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: EasyDraggableWidget(
          padding: const EdgeInsets.all(16),
          floatingBuilder: (context, constraints) {
            return Container(
              width: 150,
              height: 200,
              color: Colors.blue,
              child: const Center(
                child: Text(
                  'Drag me!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            );
          },
        ),
    );
  }
}