Flutter笔记 拖拽手势
作者 ：李俊才 （jcLee95）：blog.csdn.net/qq_28550263
邮箱 ： 291148484@163.com
本文地址 ：blog.csdn.net/qq_28550263...
目 录
1. 概述
在构建交互式应用程序时，处理用户的手势输入是至关重要的一部分。Flutter 提供了一套丰富的手势识别系统，使得开发者可以轻松地实现各种手势操作，如点击、双击、拖拽、缩放等。
在 Flutter 中，GestureDetector 组件可以识别和处理各种手势，包括拖拽手势。GestureDetector 提供了一系列的回调函数，这些函数在不同的手势事件发生时被调用，例如当手势开始、更新或结束时。对于拖拽手势，GestureDetector 提供了专门的回调函数来处理垂直拖拽、水平拖拽和二维拖拽。本文接下来的小节将对这些拖拽分别举例讲解。
2. 垂直拖拽
GestureDetector 中处理垂直拖拽手势的属性如表所示：
| 属性 | 描述 |
|---|---|
onVerticalDragDown |
当用户接触屏幕并准备在垂直方向移动时触发 |
onVerticalDragStart |
当用户接触屏幕并开始在垂直方向移动时触发 |
onVerticalDragUpdate |
当用户手指在垂直方向移动时触发 |
onVerticalDragEnd |
当用户手指在垂直方向移动后、用户手指抬起时触发 |
例如：
scala
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 |
当用户手指在水平方向移动后、用户手指抬起时触发 |
例如：
scala
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 |
当用户手指移动后、用户手指抬起时触发 |
例如：
scala
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,
),
),
);
}
}拖拽效果如下：
