Flutter框架實(shí)現(xiàn)Android拖動(dòng)到垃圾桶刪除效果
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)文章
Android 中使用ExpandableListView 實(shí)現(xiàn)分組的實(shí)例
這篇文章主要介紹了Android 中使用ExpandableListView 實(shí)現(xiàn)分組的實(shí)例的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2016-12-12Android實(shí)現(xiàn)簡(jiǎn)單斷點(diǎn)續(xù)傳和下載到本地功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單斷點(diǎn)續(xù)傳和下載到本地功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android10 分區(qū)存儲(chǔ)的適配規(guī)則
Android設(shè)備 在Sdk29己以上推出了分區(qū)存儲(chǔ),類(lèi)似iOS沙箱。應(yīng)用App 目標(biāo)版本號(hào)為29或以上則需要適配分區(qū)存儲(chǔ),本文將具體的講解適配規(guī)則2021-05-05Android實(shí)現(xiàn)后臺(tái)服務(wù)拍照功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)后臺(tái)服務(wù)拍照功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05Jenkins打包android應(yīng)用時(shí)自動(dòng)簽名apk詳解
這篇文章主要介紹了Jenkins打包android應(yīng)用時(shí)自動(dòng)簽名apk詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07Eclipse打開(kāi)時(shí)“發(fā)現(xiàn)了以元素''d:skin''”開(kāi)頭的無(wú)效內(nèi)容。此處不應(yīng)含有子元素的解決方法
這篇文章主要介紹了Eclipse打開(kāi)時(shí)“發(fā)現(xiàn)了以元素'd:skin'”開(kāi)頭的無(wú)效內(nèi)容。此處不應(yīng)含有子元素的解決方法,涉及Android sdk中devices.xml文件的修改,需要的朋友可以參考下2016-01-01android 仿微信demo——微信啟動(dòng)界面實(shí)現(xiàn)
本篇文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,希望能給你們提供幫助2021-06-06