Flutter实现可拖拽操作Draggable

1. Draggable 控件的构造函数

Draggable<T>({
  Key? key,
  required T data,  // 传递的拖拽数据
  required Widget child,  // 拖拽控件本身的显示
  Widget? feedback,  // 拖拽过程中展示的控件（通常是透明的）
  Widget? childWhenDragging,  // 拖拽时原控件的替代显示
  Axis? axis,  // 指定拖拽方向（水平或垂直）
  bool? ignorePointer,  // 是否忽略手势
  bool? dragAnchorStrategy,  // 自定义拖拽时锚点位置
  bool? onDragStarted,  // 拖拽开始时的回调
  bool? onDragEnd,  // 拖拽结束时的回调
  bool? onDraggableCanceled,  // 拖拽取消时的回调
})

主要参数：

• data：拖拽的核心数据，当用户拖拽控件时会携带此数据（可以是任意类型）。
• child：正常显示的控件。它是拖拽对象的原始显示（例如，可以是一个文本或图像）。
• feedback：拖拽时展示的控件，通常是半透明的，这个控件在拖拽期间会悬浮在用户的手指上方。
• childWhenDragging：当控件被拖拽时，原控件的替代显示（通常是空白或一个灰色的占位符）。
• axis：控制拖拽的方向，值可以是 Axis.horizontal（水平）或 Axis.vertical（垂直），也可以为 Axis.none（没有方向限制）。
• ignorePointer：是否忽略手势。如果为 true，该控件在拖拽时将无法响应任何手势。
• onDragStarted：拖拽开始时的回调，通常用来更新状态或做一些准备工作。
• onDragEnd：拖拽结束时的回调，通常用来处理拖拽结束后的逻辑。
• onDraggableCanceled：当拖拽被取消时的回调，通常是当控件离开了任何 DragTarget 区域。

2. Draggable 的工作原理

Draggable 控件主要通过 data 属性将需要拖拽的数据传递给其他控件，特别是 DragTarget，在用户拖拽控件时，Draggable 控件会自动执行以下操作：

1. 拖拽开始：当用户开始拖拽时，Draggable 控件会展示指定的 feedback，并且显示出原始控件的占位符（childWhenDragging）。
2. 拖拽过程：拖拽过程中，用户可以将控件在屏幕上拖动，通常会通过 onDragStarted 和 onDragEnd 回调来触发相应的逻辑。
3. 拖拽结束或取消：当拖拽对象被放置到 DragTarget 中，或者当用户取消拖拽时，Draggable 会触发 onDragEnd 或 onDraggableCanceled 回调。

3. 常见用法

示例 1：基本的拖拽控件

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('Draggable Example')),
        body: Center(
          child: Draggable<int>(
            data: 100,  // 拖拽的数据
            child: Container(
              padding: EdgeInsets.all(16),
              color: Colors.blue,
              child: Text('Drag me'),
            ),
            feedback: Material(
              color: Colors.transparent,
              child: Container(
                padding: EdgeInsets.all(16),
                color: Colors.blue.withOpacity(0.5),
                child: Text('Dragging'),
              ),
            ),
            childWhenDragging: Container(
              padding: EdgeInsets.all(16),
              color: Colors.grey,
              child: Text('Gone'),
            ),
          ),
        ),
      ),
    );
  }
}

解释：

• 在此例中，Draggable<int> 创建了一个可以拖拽的蓝色矩形，其内容是文本“Drag me”。
• 当用户开始拖拽时，feedback 使矩形变成一个半透明的版本（显示文本“Dragging”），同时，原始控件会被替换为一个灰色的占位符（childWhenDragging）。

示例 2：与 DragTarget 配合使用

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('Draggable with DragTarget')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Draggable<String>(
                data: "Hello, Flutter!",  // 拖拽的数据
                child: Container(
                  color: Colors.blue,
                  padding: EdgeInsets.all(20),
                  child: Text('Drag me'),
                ),
                feedback: Material(
                  color: Colors.transparent,
                  child: Container(
                    color: Colors.blue.withOpacity(0.5),
                    padding: EdgeInsets.all(20),
                    child: Text('Dragging'),
                  ),
                ),
                childWhenDragging: Container(
                  padding: EdgeInsets.all(20),
                  color: Colors.grey,
                  child: Text('Gone'),
                ),
              ),
              SizedBox(height: 50),
              DragTarget<String>(
                onAccept: (data) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Dropped: $data')),
                  );
                },
                builder: (context, candidateData, rejectedData) {
                  return Container(
                    width: 300,
                    height: 200,
                    color: Colors.orange,
                    child: Center(child: Text('Drop Here')),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释：

• 在这个例子中，Draggable<String> 允许用户拖拽一个带有文本“Drag me”的蓝色矩形。
• 拖拽过程中，feedback 显示一个半透明的矩形，childWhenDragging 在原位置展示一个灰色占位符。
• DragTarget<String> 用来接收拖拽的字符串数据，当用户将拖拽对象放入目标区域时，显示一个 SnackBar，告知接收到的内容。

4. Draggable 的回调详解

• onDragStarted：在拖拽开始时调用。通常用来执行一些初始操作，例如更新 UI 状态，或者记录拖拽开始时的时间等。
• onDragEnd：在拖拽结束时调用。可以根据拖拽结束的位置来执行不同的操作，比如更新模型数据、界面重绘等。
• onDraggableCanceled：当拖拽操作被取消时调用，例如当拖拽控件未被放置到 DragTarget 中。你可以使用这个回调恢复控件的状态，或者清除一些临时的数据。

5. 总结

• Draggable 是 Flutter 中实现拖拽功能的核心控件，可以创建可拖拽的控件并将其与 DragTarget 配合使用，实现丰富的拖拽交互。
• 它支持拖拽过程中控件状态的变化，如显示拖拽的反馈内容、替代显示、拖拽过程中展示的内容等。
• 通过回调函数如 onDragStarted、onDragEnd 和 onDraggableCanceled，你可以在不同的拖拽阶段进行更多定制化的操作。

结束语
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！