flutter框架实现android拖动到垃圾桶删除效果-kb88凯时官网登录

draggable介绍

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

构造函数

draggable的构造函数

draggable({
  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(
  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(
  {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(
  builder: (buildcontext context, list candidatedata, list 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 {
  string data = 'initial data';
  @override
  widget build(buildcontext context) {
    return column(
      mainaxisalignment: mainaxisalignment.center,
      children: [
        draggable(
          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(
          builder: (buildcontext context, list candidatedata, list 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的精彩世界！