Android 开发人员 Flutter 指南：手势聆听和触摸事件处理

原文地址：给 Android 开发者的 Flutter 指南：手势监听和触摸事件处理

1. Flutter 中如何为一个 Widget 添加点击监听器？

在 Android 中，你可以通过调用 setOnClickListener 方法在按钮这样的 View 上添加点击监听器。

在 Flutter 中有两种添加触摸监听器的方法：

1.1 如果 Widget 支持事件监听，那么向它传入一个方法并在方法中处理事件。例如，RaisedButton 有一个 onPressed 参数：

@override
Widget build(BuildContext context) {
  return ElevatedButton(
      onPressed: () {
        print("click");
      },
      child: Text("Button"));
}

1.2 如果 Widget 不支持事件监听，将 Widget 包装进一个 GestureDetector 中并向 onTap 参数传入一个方法。

class SampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: GestureDetector(
        child: FlutterLogo(
          size: 200.0,
        ),
        onTap: () {
          print("tap");
        },
      ),
    ));
  }
}

2. 如何处理 Widget 上的其它手势？

使用 GestureDetector 可以监听非常多的手势，例如：

• Tap

  • onTapDown - 一个可能产生点击事件的指针触摸到屏幕的特定位置。

  • onTapUp - 一个产生了点击事件的指针停止触摸屏幕的特定位置。

  • onTap - 一个点击事件已经发生。

  • onTapCancel - 之前触发了 onTapDown 事件的指针不会产生点击事件。

• Double tap

  • onDoubleTap - 用户在屏幕同一位置连续快速地点击两次。

• Long press

  • onLongPress - 指针在屏幕的同一位置保持了一段较长时间的触摸状态。

• Vertical drag

  • onVerticalDragStart - 指针已经触摸屏幕并可能开始垂直移动。

  • onVerticalDragUpdate - 触摸屏幕的指针在垂直方向移动了更多的距离。

  • onVerticalDragEnd - 之前和屏幕接触并垂直移动的指针不再继续和屏幕接触，并且在和屏幕停止接触的时候以一定的速度移动。

• Horizontal drag

  • onHorizontalDragStart - 指针已经触摸屏幕并可能开始水平移动。

  • onHorizontalDragUpdate - 触摸屏幕的指针在水平方向移动了更多的距离。

  • onHorizontalDragEnd - 之前和屏幕接触并水平移动的指针不再继续和屏幕接触，并且在和屏幕停止接触的时候以一定的速度移动。

下面的例子展示了一个实现了双击旋转 Flutter 标志的 GestureDetector：

import 'package:flutter/material.dart';

void main() {
  runApp(SampleApp());
}

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage>
    with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: GestureDetector(
        child: RotationTransition(
            turns: curve,
            child: FlutterLogo(
              size: 200.0,
            )),
        onDoubleTap: () {
          if (controller.isCompleted) {
            controller.reverse();
          } else {
            controller.forward();
          }
        },
      ),
    ));
  }
}