9.【文档讲解】手势检测及触摸事件处理

3-18【文档讲解】手势检测及触摸事件处理

声明：Flutter专栏文档均来自慕课网
https://coding.imooc.com/class/321.html

手势检测及触摸事件处理

• 如何给 Flutter 的 widget 添加一个点击事件的监听？
• 如何处理 widget 上的其他手势？

如何给 Flutter 的 widget 添加一个点击事件的监听？

• 在 iOS 中，你给一个 view 添加 GestureRecognizer 来处理点击事件。
• 在Android中，您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上。

在 Flutter中，有两种方法来添加点击监听者：

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

@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，可以监听多种手势，例如

• 点击

• • onTapDown — 在特定位置轻触手势接触了屏幕。
  • onTapUp — 在特定位置产生了一个轻触手势，并停止接触屏幕。
  • onTap — 产生了一个轻触手势。
  • onTapCancel — 触发了 onTapDown 但没能触发 tap。

• 双击

• • onDoubleTap — 用户在同一个位置快速点击了两下屏幕。

• 长按

• • onLongPress — 用户在同一个位置长时间接触屏幕。

• 垂直拖动

• • onVerticalDragStart — 接触了屏幕，并且可能会垂直移动。
  • onVerticalDragUpdate — 接触了屏幕，并继续在垂直方向移动。
  • onVerticalDragEnd — 之前接触了屏幕并垂直移动，并在停止接触屏幕前以某个垂直的速度移动。

• 水平拖动

• • onHorizontalDragStart — 接触了屏幕，并且可能会水平移动。
  • onHorizontalDragUpdate — 接触了屏幕，并继续在水平方向移动。
  • onHorizontalDragEnd — 之前接触屏幕并水平移动的触摸点与屏幕分离。

下面这个例子展示了一个GestureDetector是如何实现根据按下、松开、点击取消事件做相应处理的：

GestureDetector(
  onTapDown: (e) {
    _speakStart();
  },
  onTapUp: (e) {
    _speakStop();
  },
  onTapCancel: () {
    _speakStop();
  },
  child: Center(
    child: Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(10),
          child: Text(
            speakTips,
            style: TextStyle(color: Colors.blue, fontSize: 12),
          ),
        ),
        Stack(
          children: <Widget>[
            Container(
              //占坑，避免动画执行过程中导致父布局大小变得
              height: MIC_SIZE,
              width: MIC_SIZE,
            ),
            Center(
              child: AnimatedMic(
                animation: animation,
              ),
            )
          ],
        )
      ],
    ),
  ))

关于GestureDetector的更多用法和实战技巧，可以学习《处理手势之GestureDetector开发指南》部分的课程。