欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年12月30日 10:20:10   作者：江上清風山間明月  
這篇文章主要介紹了Flutter框架實現(xiàn)Android拖動到垃圾桶刪除效果,Flutter框架中的Draggable部件,用于支持用戶通過手勢拖動,它是基于手勢的一種方式,可以使用戶可以在屏幕上拖動指定的部件,下面我們來詳細了解一下

Draggable介紹

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

構造函數(shù)

Draggable的構造函數(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?): 拖動時顯示的反饋部件。如果為null，則使用child作為反饋部件。
  • data (T?): 拖動過程中傳遞給DragTarget的數(shù)據(jù)。
  • axis (Axis?): 限制拖動的軸向?？梢允茿xis.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?): 拖動開始時的回調(diào)函數(shù)。
  • onDragEnd (DraggableDetailsCallback?): 拖動結束時的回調(diào)函數(shù)。
  • onDraggableCanceled (DraggableCanceledCallback?): 在拖動被取消時的回調(diào)函數(shù)。
  • maxSimultaneousDrags (int?): 同時拖動的最大數(shù)量。
  • 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: () {
    // 拖動開始時執(zhí)行的操作
    print("Drag started!");
  },
  onDragEnd: (details) {
    // 拖動結束時執(zhí)行的操作
    print("Drag ended!");
  },
);

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

DragTarget介紹

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

以下是關于 DragTarget 的詳細介紹：

構造函數(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): 用于構建 DragTarget 的子部件。builder 接受三個參數(shù)，分別是 BuildContext、當前拖動的數(shù)據(jù)列表和之前已經(jīng)接收的數(shù)據(jù)列表。
  • onWillAccept (bool Function(T)?): 在拖動對象進入 DragTarget 區(qū)域時調(diào)用，用于決定是否接受拖動對象。如果返回 true，則 onAccept 將被調(diào)用。
  • onAccept (void Function(T)?): 在拖動對象被釋放到 DragTarget 區(qū)域內(nèi)時調(diào)用，用于處理接受的拖動數(shù)據(jù)。
  • onLeave (void Function(T)?): 在拖動對象離開 DragTarget 區(qū)域時調(diào)用。
  • hitTestBehavior (HitTestBehavior): 用于決定點擊測試的行為。默認值是 HitTestBehavior.deferToChild，表示點擊測試會被委托給子部件。
  • feedback (Widget?): 用于自定義拖動時的反饋部件。
  • 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) {
    // 在拖動對象進入 DragTarget 區(qū)域時調(diào)用
    // 返回 true 表示接受拖動對象
    return true;
  },
  onAccept: (data) {
    // 在拖動對象被釋放到 DragTarget 區(qū)域內(nèi)時調(diào)用
    // 處理接受的拖動數(shù)據(jù)
    print("Accepted data: $data");
  },
  onLeave: (data) {
    // 在拖動對象離開 DragTarget 區(qū)域時調(diào)用
  },
)

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

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

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

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

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

結束語

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

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

相關文章

最新評論