招聘网站收费标准对比图怎么做,wordpress文章美化框,网站后台教程,行业数据分析网站文章目录 Draggable介绍构造函数参数说明使用示例 DragTarget 介绍构造函数参数说明使用示例 DragTarget 如何接收Draggable传递过来的数据#xff1f; Draggable介绍
Draggable是Flutter框架中的一个小部件#xff0c;用于支持用户通过手势拖动一个子部件。它是基于手势的一… 文章目录 Draggable介绍构造函数参数说明使用示例 DragTarget 介绍构造函数参数说明使用示例 DragTarget 如何接收Draggable传递过来的数据 Draggable介绍
Draggable是Flutter框架中的一个小部件用于支持用户通过手势拖动一个子部件。它是基于手势的一种方式可以使用户可以在屏幕上拖动指定的部件。以下是关于Draggable的一些详细介绍
构造函数
Draggable的构造函数
DraggableT({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?): 限制拖动的轴向。可以是Axis.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): 是否允许拖动。如果为falseDraggable将不响应拖动手势。 gestureRecognizer (DragGestureRecognizer?): 用于自定义拖动手势检测的手势识别器。 dragAnchorStrategy (DragAnchorStrategy): 用于控制拖动锚点的策略。
使用示例
Draggableint(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: () {// 拖动开始时执行的操作print(Drag started!);},onDragEnd: (details) {// 拖动结束时执行的操作print(Drag ended!);},
);在这个例子中当用户拖动包含文本Drag me的蓝色容器时onDragStarted回调被触发打印Drag started!“。在拖动结束时onDragEnd回调被触发打印Drag ended!”。被拖动的数据是42可以通过DragTarget接收并处理。
DragTarget 介绍
DragTarget 是 Flutter 框架中的一个小部件用于接收拖动操作并处理拖动过程中传递的数据。它是与 Draggable 配合使用的一种方式允许你指定拖动对象应该如何被接收和处理。
以下是关于 DragTarget 的详细介绍
构造函数
DragTargetT({Key? key,required this.builder,this.onWillAccept,this.onAccept,this.onLeave,this.hitTestBehavior HitTestBehavior.deferToChild,this.feedback,this.child,
})参数说明 builder (Widget Function(BuildContext, ListT?, List): 用于构建 DragTarget 的子部件。builder 接受三个参数分别是 BuildContext、当前拖动的数据列表和之前已经接收的数据列表。 onWillAccept (bool Function(T)?): 在拖动对象进入 DragTarget 区域时调用用于决定是否接受拖动对象。如果返回 true则 onAccept 将被调用。 onAccept (void Function(T)?): 在拖动对象被释放到 DragTarget 区域内时调用用于处理接受的拖动数据。 onLeave (void Function(T)?): 在拖动对象离开 DragTarget 区域时调用。 hitTestBehavior (HitTestBehavior): 用于决定点击测试的行为。默认值是 HitTestBehavior.deferToChild表示点击测试会被委托给子部件。 feedback (Widget?): 用于自定义拖动时的反馈部件。 child (Widget?): 用于放置在 DragTarget 区域内的子部件。
使用示例
DragTargetint(builder: (BuildContext context, Listint? candidateData, Listdynamic rejectedData) {return Container(width: 200,height: 200,color: Colors.grey,child: Center(child: Text(Drop here),),);},onWillAccept: (data) {// 在拖动对象进入 DragTarget 区域时调用// 返回 true 表示接受拖动对象return true;},onAccept: (data) {// 在拖动对象被释放到 DragTarget 区域内时调用// 处理接受的拖动数据print(Accepted data: $data);},onLeave: (data) {// 在拖动对象离开 DragTarget 区域时调用},
)在这个例子中DragTarget 是一个大小为 200x200 的灰色容器上面显示着 “Drop here” 文本。当有拖动对象进入这个容器时onWillAccept 将被调用决定是否接受拖动对象。如果返回 true则 onAccept 将在拖动对象被释放时被调用处理接受的拖动数据。onLeave 在拖动对象离开 DragTarget 区域时被调用。这种方式可以用来实现拖放交互其中 DragTarget 接收并处理 Draggable 的数据。
DragTarget 如何接收Draggable传递过来的数据
DragTarget 通过 onAccept 回调函数接收从 Draggable 拖动传递过来的数据。这个回调函数在拖动对象被释放到 DragTarget 区域时调用。
以下是一个简单的示例演示了如何使用 Draggable 和 DragTarget 来传递和接收数据
import package:flutter/material.dart;void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {overrideWidget 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 StateMyDraggableAndDragTarget {String data Initial Data;overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [DraggableString(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),DragTargetString(builder: (BuildContext context, ListString? candidateData, Listdynamic rejectedData) {return Container(width: 150,height: 150,color: Colors.grey,child: Center(child: Text(Drop Here),),);},onWillAccept: (data) {// 当拖动对象进入 DragTarget 区域时调用// 返回 true 表示接受拖动对象return true;},onAccept: (data) {// 当拖动对象被释放到 DragTarget 区域内时调用// 处理接受的拖动数据setState(() {this.data data ?? No Data;});},onLeave: (data) {// 当拖动对象离开 DragTarget 区域时调用},),SizedBox(height: 20),Text(Received Data: $data),],);}
}在这个例子中Draggable 包含一个文本框你可以拖动它。DragTarget 是一个灰色容器当你把文本框拖动到这个容器上时它将接收拖动的数据并将接收到的数据显示在屏幕上。 结束语 Flutter是一个由Google开发的开源UI工具包它可以让您在不同平台上创建高质量、美观的应用程序而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧从UI设计到性能优化欢饮关注一起讨论学习共同进入Flutter的精彩世界
