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

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

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

Draggable介紹

Draggable是Flutter框架中的一個(gè)小部件,用于支持用戶(hù)通過(guò)手勢(shì)拖動(dòng)一個(gè)子部件。它是基于手勢(shì)的一種方式,可以使用戶(hù)可以在屏幕上拖動(dòng)指定的部件。以下是關(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ù)說(shuō)明

  • child (Widget): 被拖動(dòng)的子部件。
  • feedback (Widget?): 拖動(dòng)時(shí)顯示的反饋部件。如果為null,則使用child作為反饋部件。
  • data (T?): 拖動(dòng)過(guò)程中傳遞給DragTarget的數(shù)據(jù)。
  • axis (Axis?): 限制拖動(dòng)的軸向??梢允茿xis.horizontal(水平方向)或Axis.vertical(垂直方向)。
  • childWhenDragging (Widget?): 在拖動(dòng)時(shí)替代child的部件。如果為null,則在拖動(dòng)時(shí)顯示child。
  • feedbackOffset (Offset): 反饋部件相對(duì)于拖動(dòng)手勢(shì)的偏移。
  • dragAnchor (DragAnchor): 控制拖動(dòng)錨點(diǎn)的位置。可以是DragAnchor.child(默認(rèn)值,錨點(diǎn)在child部件的中心)或DragAnchor.pointer(錨點(diǎn)在拖動(dòng)手勢(shì)的位置)。
  • affinity (Axis?): 用于指定對(duì)齊到某個(gè)軸的情況,可以是Axis.horizontal或Axis.vertical。
  • onDragStarted (VoidCallback?): 拖動(dòng)開(kāi)始時(shí)的回調(diào)函數(shù)。
  • onDragEnd (DraggableDetailsCallback?): 拖動(dòng)結(jié)束時(shí)的回調(diào)函數(shù)。
  • onDraggableCanceled (DraggableCanceledCallback?): 在拖動(dòng)被取消時(shí)的回調(diào)函數(shù)。
  • maxSimultaneousDrags (int?): 同時(shí)拖動(dòng)的最大數(shù)量。
  • canDrag (bool): 是否允許拖動(dòng)。如果為false,Draggable將不響應(yīng)拖動(dòng)手勢(shì)。
  • gestureRecognizer (DragGestureRecognizer?): 用于自定義拖動(dòng)手勢(shì)檢測(cè)的手勢(shì)識(shí)別器。
  • dragAnchorStrategy (DragAnchorStrategy): 用于控制拖動(dòng)錨點(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: () {
    // 拖動(dòng)開(kāi)始時(shí)執(zhí)行的操作
    print("Drag started!");
  },
  onDragEnd: (details) {
    // 拖動(dòng)結(jié)束時(shí)執(zhí)行的操作
    print("Drag ended!");
  },
);

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

DragTarget介紹

DragTarget 是 Flutter 框架中的一個(gè)小部件,用于接收拖動(dòng)操作并處理拖動(dòng)過(guò)程中傳遞的數(shù)據(jù)。它是與 Draggable 配合使用的一種方式,允許你指定拖動(dòng)對(duì)象應(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ù)說(shuō)明

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

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

DragTarget如何接收Draggable傳遞過(guò)來(lái)的數(shù)據(jù)

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

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

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

結(jié)束語(yǔ)

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

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

相關(guān)文章

最新評(píng)論