快捷導(dǎo)航

Flutter框架實(shí)現(xiàn)Android拖動到垃圾桶刪除效果

更新時(shí)間：2023年12月30日 10:20:10 作者：江上清風(fēng)山間明月

這篇文章主要介紹了Flutter框架實(shí)現(xiàn)Android拖動到垃圾桶刪除效果,Flutter框架中的Draggable部件,用于支持用戶通過手勢拖動,它是基于手勢的一種方式,可以使用戶可以在屏幕上拖動指定的部件,下面我們來詳細(xì)了解一下

Draggable介紹

Draggable是Flutter框架中的一個(gè)小部件，用于支持用戶通過手勢拖動一個(gè)子部件。它是基于手勢的一種方式，可以使用戶可以在屏幕上拖動指定的部件。以下是關(guān)于Draggable的一些詳細(xì)介紹：

構(gòu)造函數(shù)

Draggable的構(gòu)造函數(shù)

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,
})

參數(shù)說明

child (Widget): 被拖動的子部件。
feedback (Widget?): 拖動時(shí)顯示的反饋部件。如果為null，則使用child作為反饋部件。
data (T?): 拖動過程中傳遞給DragTarget的數(shù)據(jù)。
axis (Axis?): 限制拖動的軸向。可以是Axis.horizontal（水平方向）或Axis.vertical（垂直方向）。
childWhenDragging (Widget?): 在拖動時(shí)替代child的部件。如果為null，則在拖動時(shí)顯示child。
feedbackOffset (Offset): 反饋部件相對于拖動手勢的偏移。
dragAnchor (DragAnchor): 控制拖動錨點(diǎn)的位置?？梢允荄ragAnchor.child（默認(rèn)值，錨點(diǎn)在child部件的中心）或DragAnchor.pointer（錨點(diǎn)在拖動手勢的位置）。
affinity (Axis?): 用于指定對齊到某個(gè)軸的情況，可以是Axis.horizontal或Axis.vertical。
onDragStarted (VoidCallback?): 拖動開始時(shí)的回調(diào)函數(shù)。
onDragEnd (DraggableDetailsCallback?): 拖動結(jié)束時(shí)的回調(diào)函數(shù)。
onDraggableCanceled (DraggableCanceledCallback?): 在拖動被取消時(shí)的回調(diào)函數(shù)。
maxSimultaneousDrags (int?): 同時(shí)拖動的最大數(shù)量。
canDrag (bool): 是否允許拖動。如果為false，Draggable將不響應(yīng)拖動手勢。
gestureRecognizer (DragGestureRecognizer?): 用于自定義拖動手勢檢測的手勢識別器。
dragAnchorStrategy (DragAnchorStrategy): 用于控制拖動錨點(diǎn)的策略。

使用示例

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: () {
    // 拖動開始時(shí)執(zhí)行的操作
    print("Drag started!");
  },
  onDragEnd: (details) {
    // 拖動結(jié)束時(shí)執(zhí)行的操作
    print("Drag ended!");
  },
);

在這個(gè)例子中，當(dāng)用戶拖動包含文本"Drag me"的藍(lán)色容器時(shí)，onDragStarted回調(diào)被觸發(fā)，打印"Drag started!“。在拖動結(jié)束時(shí)，onDragEnd回調(diào)被觸發(fā)，打印"Drag ended!”。被拖動的數(shù)據(jù)是42，可以通過DragTarget接收并處理。

DragTarget介紹

DragTarget 是 Flutter 框架中的一個(gè)小部件，用于接收拖動操作并處理拖動過程中傳遞的數(shù)據(jù)。它是與 Draggable 配合使用的一種方式，允許你指定拖動對象應(yīng)該如何被接收和處理。

以下是關(guān)于 DragTarget 的詳細(xì)介紹：

構(gòu)造函數(shù)

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

參數(shù)說明

builder (Widget Function(BuildContext, List<T?>, List): 用于構(gòu)建 DragTarget 的子部件。builder 接受三個(gè)參數(shù)，分別是 BuildContext、當(dāng)前拖動的數(shù)據(jù)列表和之前已經(jīng)接收的數(shù)據(jù)列表。
onWillAccept (bool Function(T)?): 在拖動對象進(jìn)入 DragTarget 區(qū)域時(shí)調(diào)用，用于決定是否接受拖動對象。如果返回 true，則 onAccept 將被調(diào)用。
onAccept (void Function(T)?): 在拖動對象被釋放到 DragTarget 區(qū)域內(nèi)時(shí)調(diào)用，用于處理接受的拖動數(shù)據(jù)。
onLeave (void Function(T)?): 在拖動對象離開 DragTarget 區(qū)域時(shí)調(diào)用。
hitTestBehavior (HitTestBehavior): 用于決定點(diǎn)擊測試的行為。默認(rèn)值是 HitTestBehavior.deferToChild，表示點(diǎn)擊測試會被委托給子部件。
feedback (Widget?): 用于自定義拖動時(shí)的反饋部件。
child (Widget?): 用于放置在 DragTarget 區(qū)域內(nèi)的子部件。

使用示例

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) {
    // 在拖動對象進(jìn)入 DragTarget 區(qū)域時(shí)調(diào)用
    // 返回 true 表示接受拖動對象
    return true;
  },
  onAccept: (data) {
    // 在拖動對象被釋放到 DragTarget 區(qū)域內(nèi)時(shí)調(diào)用
    // 處理接受的拖動數(shù)據(jù)
    print("Accepted data: $data");
  },
  onLeave: (data) {
    // 在拖動對象離開 DragTarget 區(qū)域時(shí)調(diào)用
  },
)

在這個(gè)例子中，DragTarget 是一個(gè)大小為 200x200 的灰色容器，上面顯示著 “Drop here” 文本。當(dāng)有拖動對象進(jìn)入這個(gè)容器時(shí)，onWillAccept 將被調(diào)用，決定是否接受拖動對象。如果返回 true，則 onAccept 將在拖動對象被釋放時(shí)被調(diào)用，處理接受的拖動數(shù)據(jù)。onLeave 在拖動對象離開 DragTarget 區(qū)域時(shí)被調(diào)用。這種方式可以用來實(shí)現(xiàn)拖放交互，其中 DragTarget 接收并處理 Draggable 的數(shù)據(jù)。

DragTarget如何接收Draggable傳遞過來的數(shù)據(jù)

DragTarget 通過 onAccept 回調(diào)函數(shù)接收從 Draggable 拖動傳遞過來的數(shù)據(jù)。這個(gè)回調(diào)函數(shù)在拖動對象被釋放到 DragTarget 區(qū)域時(shí)調(diào)用。

以下是一個(gè)簡單的示例，演示了如何使用 Draggable 和 DragTarget 來傳遞和接收數(shù)據(jù)：

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) {
            // 當(dāng)拖動對象進(jìn)入 DragTarget 區(qū)域時(shí)調(diào)用
            // 返回 true 表示接受拖動對象
            return true;
          },
          onAccept: (data) {
            // 當(dāng)拖動對象被釋放到 DragTarget 區(qū)域內(nèi)時(shí)調(diào)用
            // 處理接受的拖動數(shù)據(jù)
            setState(() {
              this.data = data ?? 'No Data';
            });
          },
          onLeave: (data) {
            // 當(dāng)拖動對象離開 DragTarget 區(qū)域時(shí)調(diào)用
          },
        ),
        SizedBox(height: 20),
        Text('Received Data: $data'),
      ],
    );
  }
}

在這個(gè)例子中，Draggable 包含一個(gè)文本框，你可以拖動它。DragTarget 是一個(gè)灰色容器，當(dāng)你把文本框拖動到這個(gè)容器上時(shí)，它將接收拖動的數(shù)據(jù)，并將接收到的數(shù)據(jù)顯示在屏幕上。

結(jié)束語

Flutter是一個(gè)由Google開發(fā)的開源UI工具包，它可以讓您在不同平臺上創(chuàng)建高質(zhì)量、美觀的應(yīng)用程序，而無需編寫大量平臺特定的代碼。我將學(xué)習(xí)和深入研究Flutter的方方面面。從基礎(chǔ)知識到高級技巧，從UI設(shè)計(jì)到性能優(yōu)化，歡飲關(guān)注一起討論學(xué)習(xí)，共同進(jìn)入Flutter的精彩世界！

到此這篇關(guān)于Flutter框架實(shí)現(xiàn)Android拖動到垃圾桶刪除效果的文章就介紹到這了,更多相關(guān)Android Draggable和DragTarget內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: