Flutter笔记：拖拽手势

---

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：[e-mail]
本文地址：https://blog.csdn.net/qq_28550263/article/details/134485123

---

---

• 1. 概述
• 2. 垂直拖拽
• 3. 水平拖拽
• 4. 二维拖拽

---

1. 概述

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

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

2. 垂直拖拽

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

例如：

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 中处理水平拖拽手势的属性如表所示：

例如：

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 中处理二维拖拽手势的属性如表所示：

例如：

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

拖拽效果如下：