Android应用-Flutter实现Android拖动到垃圾桶删除效果-Draggable和DragTarget的详细讲解

Draggable介绍

Draggable是Flutter框架中的一个小部件，用于支持用户通过手势拖动一个子部件。它是基于手势的一种方式，可以使用户可以在屏幕上拖动指定的部件。以下是关于Draggable的一些详细介绍：

构造函数

Draggable的构造函数

Draggable<T>({  Key? key,  required this.child,  this.feedback,  this.data,  this.axis,  this.childWhenDragging,  this.feedbackOffset = Offset.zero,  this.dragAnchor = DragAnchor.child,  this.affinity,  this.onDragStarted,  this.onDragEnd,  this.onDraggableCanceled,  this.maxSimultaneousDrags,  this.canDrag = true,  this.gestureRecognizer,  this.dragAnchorStrategy = DefaultDragAnchorStrategy,})

参数说明

• child (Widget): 被拖动的子部件。

• feedback (Widget?): 拖动时显示的反馈部件。如果为null，则使用child作为反馈部件。

• data (T?): 拖动过程中传递给DragTarget的数据。

• axis (Axis?): 限制拖动的轴向。可以是Axis.horizontal（水平方向）或Axis.vertical（垂直方向）。

• childWhenDragging (Widget?): 在拖动时替代child的部件。如果为null，则在拖动时显示child。

• feedbackOffset (Offset): 反馈部件相对于拖动手势的偏移。

• dragAnchor (DragAnchor): 控制拖动锚点的位置。可以是DragAnchor.child（默认值，锚点在child部件的中心）或DragAnchor.pointer（锚点在拖动手势的位置）。

• affinity (Axis?): 用于指定对齐到某个轴的情况，可以是Axis.horizontal或Axis.vertical。

• onDragStarted (VoidCallback?): 拖动开始时的回调函数。

• onDragEnd (DraggableDetailsCallback?): 拖动结束时的回调函数。

• onDraggableCanceled (DraggableCanceledCallback?): 在拖动被取消时的回调函数。

• maxSimultaneousDrags (int?): 同时拖动的最大数量。

• canDrag (bool): 是否允许拖动。如果为false，Draggable将不响应拖动手势。

• gestureRecognizer (DragGestureRecognizer?): 用于自定义拖动手势检测的手势识别器。

• dragAnchorStrategy (DragAnchorStrategy): 用于控制拖动锚点的策略。

使用示例

Draggable<int>(  data: 42,  child: Container(    width: 100,    height: 100,    color: Colors.blue,    child: Center(      child: Text("Drag me"),    ),  ),  feedback: Container(    width: 120,    height: 120,    color: Colors.blue.withOpacity(0.5),    child: Center(      child: Text("Dragging..."),    ),  ),  onDragStarted: () {    // 拖动开始时执行的操作    print("Drag started!");  },  onDragEnd: (details) {    // 拖动结束时执行的操作    print("Drag ended!");  },);

在这个例子中，当用户拖动包含文本"Drag me"的蓝色容器时，onDragStarted回调被触发，打印"Drag started!“。在拖动结束时，onDragEnd回调被触发，打印"Drag ended!”。被拖动的数据是42，可以通过DragTarget接收并处理。

DragTarget 介绍

DragTarget 是 Flutter 框架中的一个小部件，用于接收拖动操作并处理拖动过程中传递的数据。它是与 Draggable 配合使用的一种方式，允许你指定拖动对象应该如何被接收和处理。

以下是关于 DragTarget 的详细介绍：

构造函数

DragTarget<T>(  {Key? key,  required this.builder,  this.onWillAccept,  this.onAccept,  this.onLeave,  this.hitTestBehavior = HitTestBehavior.deferToChild,  this.feedback,  this.child,})

参数说明

• builder (Widget Function(BuildContext, List, List): 用于构建 DragTarget 的子部件。builder 接受三个参数，分别是 BuildContext、当前拖动的数据列表和之前已经接收的数据列表。

• onWillAccept (bool Function(T)?): 在拖动对象进入 DragTarget 区域时调用，用于决定是否接受拖动对象。如果返回 true，则 onAccept 将被调用。

• onAccept (void Function(T)?): 在拖动对象被释放到 DragTarget 区域内时调用，用于处理接受的拖动数据。

• onLeave (void Function(T)?): 在拖动对象离开 DragTarget 区域时调用。

• hitTestBehavior (HitTestBehavior): 用于决定点击测试的行为。默认值是 HitTestBehavior.deferToChild，表示点击测试会被委托给子部件。

• feedback (Widget?): 用于自定义拖动时的反馈部件。

• child (Widget?): 用于放置在 DragTarget 区域内的子部件。

使用示例

DragTarget<int>(  builder: (BuildContext context, List<int?> candidateData, List<dynamic> rejectedData) {    return Container(      width: 200,      height: 200,      color: Colors.grey,      child: Center(        child: Text("Drop here"),      ),    );  },  onWillAccept: (data) {    // 在拖动对象进入 DragTarget 区域时调用    // 返回 true 表示接受拖动对象    return true;  },  onAccept: (data) {    // 在拖动对象被释放到 DragTarget 区域内时调用    // 处理接受的拖动数据    print("Accepted data: $data");  },  onLeave: (data) {    // 在拖动对象离开 DragTarget 区域时调用  },)

在这个例子中，DragTarget 是一个大小为 200x200 的灰色容器，上面显示着 “Drop here” 文本。当有拖动对象进入这个容器时，onWillAccept 将被调用，决定是否接受拖动对象。如果返回 true，则 onAccept 将在拖动对象被释放时被调用，处理接受的拖动数据。onLeave 在拖动对象离开 DragTarget 区域时被调用。这种方式可以用来实现拖放交互，其中 DragTarget 接收并处理 Draggable 的数据。

DragTarget 如何接收Draggable传递过来的数据？

DragTarget 通过 onAccept 回调函数接收从 Draggable 拖动传递过来的数据。这个回调函数在拖动对象被释放到 DragTarget 区域时调用。

以下是一个简单的示例，演示了如何使用 Draggable 和 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 and DragTarget Example'),        ),        body: MyDraggableAndDragTarget(),      ),    );  }}class MyDraggableAndDragTarget extends StatefulWidget {  @override  _MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();}class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {  String data = 'Initial Data';  @override  Widget build(BuildContext context) {    return Column(      mainAxisAlignment: MainAxisAlignment.center,      children: [        Draggable<String>(          data: 'Dragged Data',          child: Container(            width: 100,            height: 100,            color: Colors.blue,            child: Center(              child: Text('Drag Me'),            ),          ),          feedback: Container(            width: 100,            height: 100,            color: Colors.blue.withOpacity(0.5),            child: Center(              child: Text('Dragging...'),            ),          ),          childWhenDragging: Container(            width: 100,            height: 100,            color: Colors.blue.withOpacity(0.5),          ),        ),        SizedBox(height: 20),        DragTarget<String>(          builder: (BuildContext context, List<String?> candidateData, List<dynamic> rejectedData) {            return Container(              width: 150,              height: 150,              color: Colors.grey,              child: Center(                child: Text('Drop Here'),              ),            );          },          onWillAccept: (data) {            // 当拖动对象进入 DragTarget 区域时调用            // 返回 true 表示接受拖动对象            return true;          },          onAccept: (data) {            // 当拖动对象被释放到 DragTarget 区域内时调用            // 处理接受的拖动数据            setState(() {              this.data = data ?? 'No Data';            });          },          onLeave: (data) {            // 当拖动对象离开 DragTarget 区域时调用          },        ),        SizedBox(height: 20),        Text('Received Data: $data'),      ],    );  }}

在这个例子中，Draggable 包含一个文本框，你可以拖动它。DragTarget 是一个灰色容器，当你把文本框拖动到这个容器上时，它将接收拖动的数据，并将接收到的数据显示在屏幕上。

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

来源地址：https://blog.csdn.net/yikezhuixun/article/details/134950579