ToB企服应用市场:ToB评测及商务社交产业平台

标题: flutter控件buildDragTargetWidget详解 [打印本页]

---

作者: 前进之路    时间: 2024-12-16 17:57
标题: flutter控件buildDragTargetWidget详解

  
buildDragTargetWidget 不是 Flutter 中的内置 API 或方法，但根据定名风俗，它很大概是您正在实现或使用的一个方法，用于在 Flutter 中创建一个 拖放目标（Drag Target） 的 Widget。
在 Flutter 中，拖放目标通常由 DragTarget 组件表现，常与 Draggable 组件共同使用。
1. DragTarget 的核心概念

DragTarget 是 Flutter 的一个组件，它定义了一个地区，当用户拖动一个 Draggable 对象到该地区时，DragTarget 会接收拖动对象并触发相应的回调。
基本属性

• onWillAccept: 在拖动对象进入 DragTarget 地区时触发，用于决定是否接受该对象。
  
• onAccept: 在拖动对象被放下时触发，实行接收逻辑。
  
• onLeave: 当拖动对象离开 DragTarget 地区时触发。
  
• builder: 构建 DragTarget 的 UI，提供当前的状态和候选项。
  

---

2. 基本用法

以下是一个简单的 DragTarget 示例：

1. import 'package:flutter/material.dart';
3. void main() {
4.   runApp(MyApp());
5. }
7. class MyApp extends StatelessWidget {
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       home: DragDropDemo(),
12.     );
13.   }
14. }
16. class DragDropDemo extends StatefulWidget {
17.   @override
18.   _DragDropDemoState createState() => _DragDropDemoState();
19. }
21. class _DragDropDemoState extends State<DragDropDemo> {
22.   Color targetColor = Colors.grey;
24.   @override
25.   Widget build(BuildContext context) {
26.     return Scaffold(
27.       appBar: AppBar(title: Text('Drag and Drop Demo')),
28.       body: Column(
29.         mainAxisAlignment: MainAxisAlignment.center,
30.         children: [
31.           // Draggable widget
32.           Draggable<Color>(
33.             data: Colors.blue,
34.             child: Container(
35.               width: 100,
36.               height: 100,
37.               color: Colors.blue,
38.               child: Center(child: Text('Drag me')),
39.             ),
40.             feedback: Container(
41.               width: 100,
42.               height: 100,
43.               color: Colors.blue.withOpacity(0.7),
44.               child: Center(child: Text('Dragging')),
45.             ),
46.             childWhenDragging: Container(
47.               width: 100,
48.               height: 100,
49.               color: Colors.grey,
50.               child: Center(child: Text('Dragging')),
51.             ),
52.           ),
53.           SizedBox(height: 50),
54.           // DragTarget widget
55.           DragTarget<Color>(
56.             onWillAccept: (data) {
57.               // Optionally handle acceptance logic
58.               return true;
59.             },
60.             onAccept: (data) {
61.               setState(() {
62.                 targetColor = data; // Change target color on accept
63.               });
64.             },
65.             onLeave: (data) {
66.               // Optionally handle leave logic
67.             },
68.             builder: (context, candidateData, rejectedData) {
69.               return Container(
70.                 width: 100,
71.                 height: 100,
72.                 color: targetColor,
73.                 child: Center(child: Text('Drop here')),
74.               );
75.             },
76.           ),
77.         ],
78.       ),
79.     );
80.   }
81. }

复制代码

---

3. 使用 buildDragTargetWidget

您大概想封装上述逻辑到一个方法或 Widget 中，以便复用。例如：

1. Widget buildDragTargetWidget(Color color) {
2.   return DragTarget<Color>(
3.     onWillAccept: (data) => true,
4.     onAccept: (data) {
5.       // 更新逻辑
6.     },
7.     builder: (context, candidateData, rejectedData) {
8.       return Container(
9.         width: 100,
10.         height: 100,
11.         color: color,
12.         child: Center(child: Text('Drop here')),
13.       );
14.     },
15.   );
16. }

复制代码

然后在主结构中调用该方法：

1. @override
2. Widget build(BuildContext context) {
3.   return Scaffold(
4.     appBar: AppBar(title: Text('Drag and Drop')),
5.     body: Center(
6.       child: buildDragTargetWidget(Colors.grey),
7.     ),
8.   );
9. }

复制代码

---

4. 常见场景

• 拖放颜色： 答应用户拖动颜色块到目标位置。
  
• 拖放文件： 在桌面应用步伐中接受文件拖放。
  
• 游戏交互： 实现类似拼图或卡牌游戏的拖放功能。
  

---

5. 注意事项

• 反馈样式： 使用 Draggable 的 feedback 属性定义拖动时的样式。
  
• 交互状态： 在 DragTarget 的 builder 中，可以根据 candidateData 改变表面。
  
• 性能优化： 避免在 onAccept 中实行耗时操作，只管保持 UI 响应流畅。
  
• 数据通报： 使用 Draggable 的 data 属性通报复杂对象（如 JSON、类实例）。
  

---

   竣事语
Flutter是一个由Google开辟的开源UI工具包，它可以让您在差别平台上创建高质量、雅观的应用步伐，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的出色世界！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4