flutter onPressed onTap等手势检测及触摸事件处理

我怎么给 Flutter 的 widget 添加一个点击监听者?

在 iOS 中,你给一个 view 添加 GestureRecognizer 来处理点击事件。在 Flutter 中,有两种方法来添加点击监听者:

  1. 如果 widget 本身支持事件监测,直接传递给它一个函数,并在这个函数里实现响应方法。例如,RaisedButton widget 拥有一个 RaisedButton 参数:

    @override
    Widget build(BuildContext context) {
      return RaisedButton(
        onPressed: () {
          print("click");
        },
        child: Text("Button"),
      );
    }
  2. 如果 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");
              },
            ),
          ),
        );
      }
    }

    我怎么处理 widget 上的其他手势?

    使用 GestureDetector 你可以监听更广阔范围内的手势,比如:

    • Tapping
      • onTapDown — 在特定位置轻触手势接触了屏幕。
      • onTapUp — 在特定位置产生了一个轻触手势,并停止接触屏幕。
      • onTap — 产生了一个轻触手势。
      • onTapCancel — 触发了 onTapDown 但没能触发 tap。
    • Double tapping
      • onDoubleTap — 用户在同一个位置快速点击了两下屏幕。
    • Long pressing
      • onLongPress — 用户在同一个位置长时间接触屏幕。
    • Vertical dragging
      • onVerticalDragStart — 接触了屏幕,并且可能会垂直移动。
      • onVerticalDragUpdate — 接触了屏幕,并继续在垂直方向移动。
      • onVerticalDragEnd — 之前接触了屏幕并垂直移动,并在停止接触屏幕前以某个垂直的速度移动。
    • Horizontal dragging
      • onHorizontalDragStart — 接触了屏幕,并且可能会水平移动。
      • onHorizontalDragUpdate — 接触了屏幕,并继续在水平方向移动。
      • onHorizontalDragEnd — 之前接触屏幕并水平移动的触摸点与屏幕分离。

    下面这个例子展示了一个 GestureDetector 是如何在双击时旋转 Flutter 的 logo 的: 

  3. 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: AnimateApp(),
        );
      }
    }
    
    class AnimateApp extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return _AnimateAppState();
      }
    }
    
    class _AnimateAppState extends State<AnimateApp>
        with SingleTickerProviderStateMixin {
      AnimationController controller;
      Animation<double> animation;
      CurvedAnimation curve;
    
      @override
      void initState() {
        super.initState();
        // 创建 AnimationController 对象
        controller = AnimationController(
            vsync: this, duration: const Duration(milliseconds: 2000));
        curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
        // 通过 Tween 对象 创建 Animation 对象
        animation = Tween(begin: 50.0, end: 200.0).animate(controller)
          ..addListener(() {
            // 注意:这句不能少,否则 widget 不会重绘,也就看不到动画效果
            setState(() {});
          });
        // 执行动画
        controller.forward();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'AnimateApp',
            theme: ThemeData(primaryColor: Colors.blue),
            home: Scaffold(
                appBar: AppBar(
                  title: Text('AnimateApp'),
                ),
                body: Center(
                  child: GestureDetector(
                    child: RotationTransition(
                        turns: curve,
                        child: FlutterLogo(
                          size: 200.0,
                        )),
                    onDoubleTap: () {
                      if (controller.isCompleted) {
                        controller.reverse();
                      } else {
                        controller.forward();
                      }
                    },
                  ),
                )));
      }
    
      @override
      void dispose() {
        // 资源释放
        controller.dispose();
        super.dispose();
      }
    }
原文地址:https://www.cnblogs.com/gaozhang12345/p/12052983.html