Flutter入门——面向Android开发者——手势检测和触摸事件处理

一、如何在Flutter中为小部件添加onClick监听器？

在Android中，您可以通过调用方法setOnClickListener将onClick附加的按钮等视图。

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

1. 如果Widget支持事件监测，则传递一个函数给它，在函数中处理。例如，ElevatedButton有一个onPressed参数：

@override
Widget build(BuildContext context) {
    return ElecatedButton(
        onPressed: () {
            developer.log('click');
        },
        child: const Text('Button');
    );
}

1. 如果Widget不支持事件监测，则将widget包装在GestureDetector中并将函数传递给onTap参数。

class SampleTapApp extends StatelessWidget {
    const SampleTapApp({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        reutrn Scaffold(
            body: Center(
                child: GestureDetector(
                    onTap: () {
                        developer.log('tap');
                    },
                    child: const FlutterLogo(
                        size: 200.0,
                    ),
                ),
            ),
        );
    }
}

二、如何处理小部件上的其他手势？

使用GestureDetector，您可以监听各种手势，例如：

• 点击
  • onTapDown——可能导致点击的指针已在特定位置触摸屏幕。
  • onTapUp——触发点击的指针已停止在特定位置触摸屏幕。
  • onTap——发生轻击。
  • onTapCancel——之前触发的指针onTapDown不会引起点击
• 双击
  • onDoubleTap——用户在同一位置快速连续点击屏幕两次。
• 长按
  • onLongPress——指针在同一位置豪长时间与屏幕保持接触。
• 垂直拖动
  • onVerticalDragStart——指针已接触屏幕并可能开始垂直移动。
  • onVerticalDragUpfate——与屏幕接触的指针在垂直方向上移动得更远。
  • onVerticalDragEnd——之前与屏幕接触并垂直移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动。
• 横拖
  • onHorizontalDragStart——指针已接触屏幕并可能开始水平移动。
  • onHorizontalDragUpdate——与屏幕接触的指针在水平方向上移动得更远。
  • onHorizontalDragEnd——之前与屏幕接触并水平移动的指针不再于屏幕接触，并在停止接触屏幕时以特定速度移动。

以下示例显示GestureDetector的双击旋转Flutter Logo：

class SampleApp extends StatefulWidget {
    const SampleApp({Key? key}) : super(key: key);
    
    @override
    State<SampleApp> createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> with SingleTickerProviderStateMixin {
    late AnimationController controller;
    late CurvedAnimation curve;
    
    @override
    void initState() {
        super.initState();
        controller = AnimationController(
            vsync: this,
            duration: const Duration(milliseconds: 2000),
        );
        curve = CurvedAnimation(
            parent: controller,
            curve: Curves.easeIn,
        );
    }
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Center(
                child: GestureDetector(
                    onDoubleTap: () {
                        if (controller.isCompleted) {
                            controller.reverse();
                        } else {
                            controller.forward();
                        }
                    },
                    child: RotationTransition(
                        tures: curve,
                        child: const FlutterLogo(
                            size: 200.0,
                        ),
                    ),
                ),
            ),
        );
    }
}