Flutter笔记：拖拽手势

在构建交互式应用程序时，处理用户的手势输入是至关重要的一部分。Flutter 提供了一套丰富的手势识别系统，使得开发者可以轻松地实现各种手势操作，如点击、双击、拖拽、缩放等。

在 Flutter 中，GestureDetector 组件可以识别和处理各种手势，包括拖拽手势。GestureDetector 提供了一系列的回调函数，这些函数在不同的手势事件发生时被调用，例如当手势开始、更新或结束时。对于拖拽手势，GestureDetector 提供了专门的回调函数来处理垂直拖拽、水平拖拽和二维拖拽。本文接下来的小节将对这些拖拽分别举例讲解。

GestureDetector 中处理垂直拖拽手势的属性如表所示：

例如：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('垂直拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);@overrideState<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetY 是一个状态变量，用于存储垂直偏移量double _offsetY = 0.0;@overrideWidget build(BuildContext context) {return GestureDetector(// 当用户在垂直方向上拖拽时，更新 _offsetY 的值onVerticalDragUpdate: (DragUpdateDetails details) {setState(() {_offsetY += details.delta.dy;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(0, _offsetY),child: Container(color: Colors.blue,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下：

GestureDetector 中处理水平拖拽手势的属性如表所示：

例如：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('水平拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);@overrideState<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetY 是一个状态变量，用于存储垂水平移量double _offsetX = 0.0;@overrideWidget build(BuildContext context) {return GestureDetector(// 当用户在屏幕上拖拽时，更新 _offsetX 的值onHorizontalDragUpdate: (DragUpdateDetails details) {setState(() {_offsetX += details.delta.dx;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(_offsetX, 0),child: Container(color: Colors.red,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下：

GestureDetector 中处理二维拖拽手势的属性如表所示：

例如：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('二维拖拽示例'),),body: const Center(child: DragBox(),),),);}
}class DragBox extends StatefulWidget {const DragBox({Key? key}) : super(key: key);@overrideState<DragBox> createState() => _DragBoxState();
}class _DragBoxState extends State<DragBox> {// _offsetX 和 _offsetY 是状态变量，用于存储水平和垂直偏移量double _offsetX = 0.0;double _offsetY = 0.0;@overrideWidget build(BuildContext context) {return GestureDetector(// 当用户在屏幕上拖拽时，更新 _offsetX 和 _offsetY 的值onPanUpdate: (DragUpdateDetails details) {setState(() {_offsetX += details.delta.dx;_offsetY += details.delta.dy;});},// 使用 Transform.translate 来改变 Container 的位置child: Transform.translate(offset: Offset(_offsetX, _offsetY),child: Container(color: Colors.green,width: 100.0,height: 100.0,),),);}
}

拖拽效果如下：