在Flutter上怎样实现按钮的拖拽效果

1、使用 Draggable 和 DragTarget 配合一起使用

   Draggable 界说可拖拽对象和拖动时，拖动对象的样子
  DragTarget 界说拖拽后接收对象，可拿到Draggable携带的数据

1. import 'package:flutter/material.dart';
3. class Test extends StatefulWidget {
4.   const Test({super.key});
6.   @override
7.   State<Test> createState() => _TestState();
8. }
10. class _TestState extends State<Test> {
11.   Color curColor = Colors.orange;
13.   @override
14.   Widget build(BuildContext context) {
15.     return Column(
16.       children: [
17.         Draggable<Color>(
18.           data: Colors.blue,
19.           feedback: Container(
20.             width: 50,
21.             height: 50,
22.             color: Colors.blue,
23.           ),
24.           child: Container(
25.             width: 50,
26.             height: 50,
27.             color: Colors.blue,
28.           ),
29.         ),
30.         Draggable<Color>(
31.           data: Colors.yellow,
32.           feedback: Container(
33.             width: 50,
34.             height: 50,
35.             color: Colors.yellow,
36.           ),
37.           child: Container(
38.             width: 50,
39.             height: 50,
40.             color: Colors.yellow,
41.           ),
42.         ),
43.         Draggable<Color>(
44.           data: Colors.red,
45.           feedback: Container(
46.             width: 50,
47.             height: 50,
48.             color: Colors.red,
49.           ),
50.           child: Container(
51.             width: 50,
52.             height: 50,
53.             color: Colors.red,
54.           ),
55.         ),
56.         DragTarget<Color>(
57.           onAcceptWithDetails: (DragTargetDetails c) {
58.             print(c);
59.             setState(() {
60.               curColor = c.data as Color;
61.             });
62.           },
63.           builder: (context, _, __) {
64.             return Container(
65.               width: 50,
66.               height: 50,
67.               color: curColor,
68.               alignment: Alignment.center,
69.               child: const Text('拖放到这里'),
70.             );
71.           },
72.         ),
73.       ],
74.     );
75.   }
76. }

复制代码

特点​：

• 支持拖拽数据通报（通过data参数）。
  
• 提供完备的拖拽生命周期回调（如onDragStarted、onDragEnd
  

方式二：使用GestureDetector 的onPanUpdate函数来监听 移动

1. import 'package:flutter/material.dart';
3. class DraggableButton extends StatefulWidget {
4.   const DraggableButton({super.key});
6.   @override
7.   State<DraggableButton> createState() => _DraggableButtonState();
8. }
10. class _DraggableButtonState extends State<DraggableButton> {
11.   Offset _offset = Offset.zero;
13.   @override
14.   Widget build(BuildContext context) {
15.     return SizedBox(
16.       width: double.infinity,
17.       height: 400,
18.       child: Stack(
19.         children: [
20.           Positioned(
21.             left: _offset.dx,
22.             top: _offset.dy,
23.             child: GestureDetector(
24.               onPanUpdate: (details) {
25.                 setState(() {
26.                   _offset += details.delta; // 更新偏移量
27.                 });
28.               },
29.               child: FloatingActionButton(
30.                 onPressed: () {},
31.                 child: const Icon(Icons.drag_handle),
32.               ),
33.             ),
34.           ),
35.         ],
36.       ),
37.     );
38.   }
39. }

复制代码

第三、使用第三方库

flutter_draggable_gridview | Flutter package
draggable_float_widget | Flutter package
draggable_home | Flutter package

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

继续阅读请点击广告