在 Flutter 中怎样为一个 Widget 添加点击事件监听器
in Android
我们通常调用一个 View 的 setOnClickListener 方法来监听一个 View 的点击事件
in Flutter
我们视情况不同有两种实现方法, 一是直接传递一个处理事件的方法给 Widget, 二是通过 GestureDetector 来实现事件监听与处理
下面两个例子对两种实现方法做简要说明:
- @override
- Widget build(BuildContext context) {
- return new RaisedButton(
- onPressed: () {
- print("click");
- },
- child: new Text("Button"));
- }
这个例子描述了如何使用第一种方法实现点击事件监听其实很简单, 在构造 RaisedButton 时直接传递一个用于处理事件的方法给 onPressed 参数就可以了, 当 RaisedButton 被点击时名为 onPressed 的参数所指向的方法就会被调用在这里就是简单的打印出 "click"
Note: 这种方法仅当 Widget 本身已经支持事件监听时使用比如这里的 RaisedButton 是系统提供的一个 Widget, 其本身已经支持了事件监听, 所以可以直接在构造时传递一个用于处理事件的方法给它
- class SampleApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return new Scaffold(
- body: new Center(
- child: new GestureDetector(
- child: new FlutterLogo(
- size: 200.0,
- ),
- onTap: () {
- print("tap");
- },
- ),
- ));
- }
- }
这个例子描述了如何使用第二种方法实现点击事件监听这里的关键是 GestureDetector, 我们将需要响应点击事件的 Widget 包裹到 GestureDetector 内部, 并且传递一个用来处理点击事件的方法给 GestureDetector 的 onTap 参数, 当点击事件发生时 onTap 所指向的方法就会被调用在这里就是简单的打印出 "tap"
Note: 这种方法在 Widget 本身不支持事件监听时使用
小结: 在 Flutter 中实现点击事件的监听处理有两种方法 针对本身支持事件监听的 Widget 可以直接在构造 Widget 时传入一个方法用于点击事件处理 针对本身不支持事件监听的 Widget 可以将其包裹在一个 GestureDetector 内部来实现点击事件处理
在 Flutter 中怎样处理其他事件
in Android
我们可以通过各个组件提供的接口来设置相应的事件监听器来监听并处理我们所关心的事件
直接监听 touch 事件自行判定事件的类型并处理事件
通过 GestureDetector 类来帮助监听各种手势事件
in Flutter
也有一个 GestureDetector 类存在, 利用它我们可以监听很多事件
在 Flutter 中 GestureDetector 可以监听以下事件:
Tap
onTapDown 监听处理一个刚刚接触到屏幕的事件, 类似于 Android 中 Action 为 ACTION_DOWN 的 touch event
onTapUp 监听处理一个接触屏幕后的离屏事件, 类似于 Android 中 Action 为 ACTION_UP 的 touch event
onTap 监听处理一个点击事件, 类似于 Android 中的 onClick
onTapCancel 类似 Android 中 Action 为 ACTION_CANCEL 的 touch event 出现该事件的原因可能是从 ACTION_DOWN 到 ACTION_UP 的过程当中因为手指移出可交互区或者其他异常导致的
Double tap
onDoubleTap 监听处理一个双击事件
Long press
onLongPress 监听处理一个长按事件
Vertical drag
onVerticalDragStart 监听处理一个垂直方向拖拽事件的开始
onVerticalDragUpdate 监听处理一个垂直方向拖拽事件在拖拽过程中的移动
onVerticalDragEnd 监听处理一个垂直方向拖拽事件的结束
Horizontal drag
onHorizontalDragStart 监听处理一个水平方向拖拽事件的开始
onHorizontalDragUpdate 监听处理一个水平方向的拖拽事件在拖拽过程中的移动
onHorizontalDragEnd 监听处理一个水平方向的拖拽事件的结束
下面的例子简单展示了如何使用 GestureDetector 来监听一个 Double tap 事件:
- AnimationController controller;
- CurvedAnimation curve;
- @override
- void initState() {
- controller = new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
- curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
- }
- class SampleApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return new Scaffold(
- body: new Center(
- child: new GestureDetector(
- child: new RotationTransition(
- turns: curve,
- child: new FlutterLogo(
- size: 200.0,
- )),
- onDoubleTap: () {
- if (controller.isCompleted) {
- controller.reverse();
- } else {
- controller.forward();
- }
- },
- ),
- ));
- }
- }
在这个例子中我们想让一个 FlutterLogo 响应 Double tap 事件, 但是 FlutterLogo 本身是不支持事件处理的 Widget, 所以这里将其包裹在 GestureDetector 内部, 并通过 GestureDetector 的 onDoubleTap 参数来传递一个用于处理 Double tap 事件的方法 因为这个例子是想 FlutterLogo 在接收到 Double tap 事件后去执行一个旋转动画, 所以这里并不是直接将 FlutterLogo 包裹在 GestureDetector 内部, 而是先用描述一个旋转动画的组件 RotationTransition 包裹 FlutterLogo, 接着再在外层用 GestureDetector 包裹 RotationTransition 组件关于在 Flutter 中实现动画的介绍可以参阅 FFAD-Views
小结: 在 Flutter 中使用 GestureDetector 可以监听处理大多数类型的事件, 使用时只要将我们想要接收事件的 Widget 包裹在 GestureDetector 内部, 并传递事件处理方法给相应的参数即可
来源: https://juejin.im/post/5a9c106151882555872300f2