Flutter笔记：拖拽手势

Flutter笔记 拖拽手势

作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263
邮箱：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/134485123

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);@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,),),);}
}

拖拽效果如下：

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);@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,),),);}
}

拖拽效果如下：

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);@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,),),);}
}