第二十三回:Flutter中的事件处理


我们在上一章回中介绍了对齐和边距类Widget相关的内容,,本章回中将介绍 事件处理相关的知识.闲话休提,让我们一起Talk Flutter吧。

概念介绍

我们在这里说的事件表示点击和滑动屏幕时触发的事件,类似Android中的TouchEvent.Flutter提供了PointerEvent类及其子类来封装不同类型的事件。同时还提供了Listener组件来管理事件,当事件被触发后Listener将把事件传递到相应的组件上,进而完成组件对事件的响应。本章回中将详细介绍该组件的使用方法。

使用方法

Listener也是一个Widget,它的使用方法类似容器类Widget,它提供了相关的属性用来处理不同类型的事件,它还提供了一个child属性,它把事件传递给该属性对应的组件,进而让组件来响应不同的事件。接下来我们介绍一下Listener提供的属性。

  • onPointerDown属性,用来响应down事件,比如手指在屏幕上按下时就会触发这类事件;
  • onPointerUp属性,用来响应up事件,比如手指在屏幕上松开时就会触发这类事件;
  • onPointerMove属性,用来响应move事件,比如手指在屏幕上滑动时就会触发这类事件;

Listener还提供了其它的属性,这里不再一一介绍。这三个属性是Listener中常用的属性,这三个属性已经可以满足决大部分的程序需求。

给这三个属性赋值时需要使用带有参数的方法,这里的参数必须是PointerEvent类及其子类的对象,从参数中可以获取到事件类型,以及其它与事件相关的信息,常用的是触发事件点的坐标。我们可以通过PointerEvent类的position属性来获取到事件的坐标值。

示例代码

  void _eventDown(PointerDownEvent event) => print("Event Down: position:${event.position}");
  void _eventUp(PointerEvent event) => print("Event Up: position:${event.position}");
  void _eventMove(PointerEvent event) => print(
      "Event Move: position:${event.position} transform: ${event.transform},delta: ${event.delta}");
Listener(
  onPointerDown: _eventDown,
  onPointerMove: _eventMove,
  onPointerUp: _eventUp,
  child: const Text(
    "Event Listener inside",
    style: TextStyle(
      color: Colors.black87,
      fontSize: 16,
      backgroundColor: Colors.white,
    ),
  )),

上面的代码中定义了三个方法,把它们分别赋值给不同的属性,这样可以响应不同类型的事件。在三个方法中我们打印出了事件的类型,以及事件触发点的坐标值。最后我们把Text组件赋值给了Listener的child属性,这相当于让Text组件来响应不同类型的事件。

我们在这里只列出了核心代码,完成的代码可以到Github上ex014文件中查看。编译并且运行上面的程序,就会出现一个白底黑字区域,点击此区域时就会触发相应的事件,大家可以在日志中看到代码中打印出的内容。我们在这里就不演示日志的内容了,建议看官们自动动手试一试。

看官们,关于"Flutter中事件处理"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值