Flutter笔记拖拽手势
1. 概述
在构建交互式应用程序时，处理用户的手势输入是至关重要的一部分。Flutter 提供了一套丰富的手势识别系统，使得开发者可以轻松地实现各种手势操作，如点击、双击、拖拽、缩放等。
在 Flutter 中，GestureDetector 组件可以识别和处理各种手势，包括拖拽手势。GestureDetector 提供了一系列的回调函数，这些函数在不同的手势事件发生时被调用，例如当手势开始、更新或结束时。对于拖拽手势，GestureDetector 提供了专门的回调函数来处理垂直拖拽、水平拖拽和二维拖拽。本文接下来的小节将对这些拖拽分别举例讲解。
2. 垂直拖拽
GestureDetector 中处理垂直拖拽手势的属性如表所示：
| 属性 | 描述 |
onVerticalDragDown |
当用户接触屏幕并准备在垂直方向移动时触发 |
onVerticalDragStart |
当用户接触屏幕并开始在垂直方向移动时触发 |
onVerticalDragUpdate |
当用户手指在垂直方向移动时触发 |
onVerticalDragEnd |
当用户手指在垂直方向移动后、用户手指抬起时触发 |
例如：
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget 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); @override State<DragBox> createState() => _DragBoxState(); } class _DragBoxState extends State<DragBox> { // _offsetY 是一个状态变量，用于存储垂直偏移量 double _offsetY = 0.0; @override Widget 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, ), ), ); } }
拖拽效果如下：
3. 水平拖拽
GestureDetector 中处理水平拖拽手势的属性如表所示：
| 属性 | 描述 |
onHorizontalDragDown |
当用户接触屏幕并准备在水平方向移动时触发 |
onHorizontalDragStart |
当用户接触屏幕并开始在水平方向移动时触发 |
onHorizontalDragUpdate |
当用户手指在水平方向移动时触发 |
onHorizontalDragEnd |
当用户手指在水平方向移动后、用户手指抬起时触发 |
例如：
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget 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); @override State<DragBox> createState() => _DragBoxState(); } class _DragBoxState extends State<DragBox> { // _offsetY 是一个状态变量，用于存储垂水平移量 double _offsetX = 0.0; @override Widget 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, ), ), ); } }
拖拽效果如下：
4. 二维拖拽
GestureDetector 中处理二维拖拽手势的属性如表所示：
| 属性 | 描述 |
onPanDown |
当用户接触屏幕并准备移动时触发 |
onPanStart |
当用户接触屏幕并开始移动时触发 |
onPanUpdate |
当用户手指移动时触发 |
onPanEnd |
当用户手指移动后、用户手指抬起时触发 |
例如：
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget 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); @override State<DragBox> createState() => _DragBoxState(); } class _DragBoxState extends State<DragBox> { // _offsetX 和 _offsetY 是状态变量，用于存储水平和垂直偏移量 double _offsetX = 0.0; double _offsetY = 0.0; @override Widget 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, ), ), ); } }
拖拽效果如下：
