Draggable介紹
Draggable是Flutter框架中的一個小部件，用于支持用戶通過手勢拖動一個子部件。它是基于手勢的一種方式，可以使用戶可以在屏幕上拖動指定的部件。以下是關于Draggable的一些詳細介紹：
構造函數
Draggable的構造函數
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,
})
參數說明
-
child (Widget): 被拖動的子部件。
-
feedback (Widget?): 拖動時顯示的反饋部件。如果為null，則使用child作為反饋部件。
-
data (T?): 拖動過程中傳遞給DragTarget的數據。
-
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?): 拖動開始時的回調函數。
-
onDragEnd (DraggableDetailsCallback?): 拖動結束時的回調函數。
-
onDraggableCanceled (DraggableCanceledCallback?): 在拖動被取消時的回調函數。
-
maxSimultaneousDrags (int?): 同時拖動的最大數量。
-
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回調被觸發(fā)，打印"Drag started!“。在拖動結束時，onDragEnd回調被觸發(fā)，打印"Drag ended!”。被拖動的數據是42，可以通過DragTarget接收并處理。
DragTarget 介紹
DragTarget 是 Flutter 框架中的一個小部件，用于接收拖動操作并處理拖動過程中傳遞的數據。它是與 Draggable 配合使用的一種方式，允許你指定拖動對象應該如何被接收和處理。
以下是關于 DragTarget 的詳細介紹：
構造函數
DragTarget<T>(
{Key? key,
required this.builder,
this.onWillAccept,
this.onAccept,
this.onLeave,
this.hitTestBehavior = HitTestBehavior.deferToChild,
this.feedback,
this.child,
})
參數說明
-
builder (Widget Function(BuildContext, List<T?>, List): 用于構建 DragTarget 的子部件。builder 接受三個參數，分別是 BuildContext、當前拖動的數據列表和之前已經接收的數據列表。
-
onWillAccept (bool Function(T)?): 在拖動對象進入 DragTarget 區(qū)域時調用，用于決定是否接受拖動對象。如果返回 true，則 onAccept 將被調用。
-
onAccept (void Function(T)?): 在拖動對象被釋放到 DragTarget 區(qū)域內時調用，用于處理接受的拖動數據。
-
onLeave (void Function(T)?): 在拖動對象離開 DragTarget 區(qū)域時調用。
-
hitTestBehavior (HitTestBehavior): 用于決定點擊測試的行為。默認值是 HitTestBehavior.deferToChild，表示點擊測試會被委托給子部件。
-
feedback (Widget?): 用于自定義拖動時的反饋部件。
-
child (Widget?): 用于放置在 DragTarget 區(qū)域內的子部件。
使用示例
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ū)域時調用
// 返回 true 表示接受拖動對象
return true;
},
onAccept: (data) {
// 在拖動對象被釋放到 DragTarget 區(qū)域內時調用
// 處理接受的拖動數據
print("Accepted data: $data");
},
onLeave: (data) {
// 在拖動對象離開 DragTarget 區(qū)域時調用
},
)
在這個例子中，DragTarget 是一個大小為 200x200 的灰色容器，上面顯示著 “Drop here” 文本。當有拖動對象進入這個容器時，onWillAccept 將被調用，決定是否接受拖動對象。如果返回 true，則 onAccept 將在拖動對象被釋放時被調用，處理接受的拖動數據。onLeave 在拖動對象離開 DragTarget 區(qū)域時被調用。這種方式可以用來實現拖放交互，其中 DragTarget 接收并處理 Draggable 的數據。
DragTarget 如何接收Draggable傳遞過來的數據？
DragTarget 通過 onAccept 回調函數接收從 Draggable 拖動傳遞過來的數據。這個回調函數在拖動對象被釋放到 DragTarget 區(qū)域時調用。
以下是一個簡單的示例，演示了如何使用 Draggable 和 DragTarget 來傳遞和接收數據：文章來源：http://www.zghlxwxcb.cn/news/detail-761343.html
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Draggable and DragTarget Example'),
),
body: MyDraggableAndDragTarget(),
),
);
}
}
class MyDraggableAndDragTarget extends StatefulWidget {
_MyDraggableAndDragTargetState createState() => _MyDraggableAndDragTargetState();
}
class _MyDraggableAndDragTargetState extends State<MyDraggableAndDragTarget> {
String data = 'Initial Data';
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ū)域時調用
// 返回 true 表示接受拖動對象
return true;
},
onAccept: (data) {
// 當拖動對象被釋放到 DragTarget 區(qū)域內時調用
// 處理接受的拖動數據
setState(() {
this.data = data ?? 'No Data';
});
},
onLeave: (data) {
// 當拖動對象離開 DragTarget 區(qū)域時調用
},
),
SizedBox(height: 20),
Text('Received Data: $data'),
],
);
}
}
在這個例子中，Draggable 包含一個文本框，你可以拖動它。DragTarget 是一個灰色容器，當你把文本框拖動到這個容器上時，它將接收拖動的數據，并將接收到的數據顯示在屏幕上。文章來源地址http://www.zghlxwxcb.cn/news/detail-761343.html
結束語 Flutter是一個由Google開發(fā)的開源UI工具包，它可以讓您在不同平臺上創(chuàng)建高質量、美觀的應用程序，而無需編寫大量平臺特定的代碼。我將學習和深入研究Flutter的方方面面。從基礎知識到高級技巧，從UI設計到性能優(yōu)化，歡飲關注一起討論學習，共同進入Flutter的精彩世界！
到了這里，關于Android應用-Flutter實現Android拖動到垃圾桶刪除效果-Draggable和DragTarget的詳細講解的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
