网站开发的主要技术难点和重点,岳阳建网站,做陶瓷的公司网站,浙江 外贸网站建设一. 事件监听 在大前端的开发中#xff0c;必然存在各种各样和用户交互的情况#xff1a;比如手指点击、手指滑动、双击、长按等等。所有内容首发于公众号#xff1a;coderwhy在Flutter中#xff0c;手势有两个不同的层次#xff1a;第一层#xff1a;原始指针事件#…一. 事件监听 在大前端的开发中必然存在各种各样和用户交互的情况比如手指点击、手指滑动、双击、长按等等。 所有内容首发于公众号coderwhy在Flutter中手势有两个不同的层次第一层原始指针事件Pointer Events描述了屏幕上由触摸板、鼠标、指示笔等触发的指针的位置和移动。第二层手势识别Gesture Detector这个是在原始事件上的一种封装。 比如我们要监听用户长按如果自己封装原始事件我们需要监听从用户按下到抬起的时间来判断是否是一次长按事件比如我们需要监听用户双击事件我们需要自己封装监听用户两次按下抬起的时间间隔幸运的是各个平台几乎都对它们进行了封装而Flutter中的手势识别就是对原始指针事件的封装包括哪些手势呢比如点击、双击、长按、拖动等2.1. 指针事件PointerPointer 代表的是人机界面交互的原始数据。一共有四种指针事件PointerDownEvent 指针在特定位置与屏幕接触PointerMoveEvent 指针从屏幕的一个位置移动到另外一个位置PointerUpEvent 指针与屏幕停止接触PointerCancelEvent 指针因为一些特殊情况被取消Pointer的原理是什么呢在指针落下时框架做了一个 hit test 的操作确定与屏幕发生接触的位置上有哪些Widget以及分发给最内部的组件去响应事件会沿着最内部的组件向组件树的根冒泡分发并且不存在用于取消或者停止指针事件进一步分发的机制原始指针事件使用Listener来监听class HomeContent extends StatelessWidget {overrideWidget build(BuildContext context) {return Center(child: Listener(child: Container(width: 200,height: 200,color: Colors.red,),onPointerDown: (event) print(手指按下:$event),onPointerMove: (event) print(手指移动:$event),onPointerUp: (event) print(手指抬起:$event),),);} } 2.2. 手势识别GestureGesture是对一系列Pointer的封装官方建议开发中尽可能使用Gesture而不是PointerGesture分层非常多的种类点击onTapDown用户发生手指按下的操作onTapUp用户发生手指抬起的操作onTap用户点击事件完成onTapCancel事件按下过程中被取消双击onDoubleTap快速点击了两次长按onLongPress在屏幕上保持了一段时间纵向拖拽onVerticalDragStart指针和屏幕产生接触并可能开始纵向移动onVerticalDragUpdate指针和屏幕产生接触在纵向上发生移动并保持移动onVerticalDragEnd指针和屏幕产生接触结束横线拖拽onHorizontalDragStart指针和屏幕产生接触并可能开始横向移动onHorizontalDragUpdate指针和屏幕产生接触在横向上发生移动并保持移动onHorizontalDragEnd指针和屏幕产生接触结束移动onPanStart指针和屏幕产生接触并可能开始横向移动或者纵向移动。如果设置了 onHorizontalDragStart 或者 onVerticalDragStart该回调方法会引发崩溃onPanUpdate指针和屏幕产生接触在横向或者纵向上发生移动并保持移动。如果设置了 onHorizontalDragUpdate 或者 onVerticalDragUpdate该回调方法会引发崩溃。onPanEnd指针先前和屏幕产生了接触并且以特定速度移动此后不再在屏幕接触上发生移动。如果设置了 onHorizontalDragEnd 或者 onVerticalDragEnd该回调方法会引发崩溃。从Widget的层面来监听手势我们需要使用GestureDetector当然我们也可以使用RaisedButton、FlatButton、InkWell等来监听手势globalPosition用于获取相对于屏幕的位置信息localPosition用于获取相对于当前Widget的位置信息class HYHomePage extends StatelessWidget {overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(手势测试),),body: GestureDetector(child: Container(width: 200,height: 200,color: Colors.red,),onTap: () {},onTapDown: (detail) {print(detail.globalPosition);print(detail.localPosition);},onTapUp: (detail) {print(detail.globalPosition);print(detail.localPosition);}),);} }二. 跨组件事件 在组件之间如果有事件需要传递一方面可以一层层来传递另一方面我们也可以使用一个EventBus工具来完成。其实EventBus在Vue、React中都是一种非常常见的跨组件通信的方式EventBus相当于是一种订阅者模式通过一个全局的对象来管理这个EventBus我们可以自己实现也可以使用第三方的EventBus这里我们直接选择第三方的EventBusdependencies:event_bus: ^1.1.1 第一我们需要定义一个希望在组件之间传递的对象我们可以称之为一个时间对象也可以是我们平时开发中用的模型对象modelclass UserInfo {String nickname;int level;UserInfo(this.nickname, this.level); } 第二创建一个全局的EventBus对象final eventBus EventBus(); 第三在某个Widget中发出事件class HYButton extends StatelessWidget {overrideWidget build(BuildContext context) {return RaisedButton(child: Text(HYButton),onPressed: () {final info UserInfo(why, 18);eventBus.fire(info);},);} } 第四在某个Widget中监听事件class HYText extends StatefulWidget {override_HYTextState createState() _HYTextState(); }class _HYTextState extends StateHYText {String message Hello Coderwhy;overridevoid initState() {super.initState();eventBus.onUserInfo().listen((data) {setState(() {message ${data.nickname}-${data.level};});});}overrideWidget build(BuildContext context) {return Text(message, style: TextStyle(fontSize: 30),);} } 备注所有内容首发于公众号之后除了Flutter也会更新其他技术文章TypeScript、React、Node、uniapp、mpvue、数据结构与算法等等也会更新一些自己的学习心得等欢迎大家关注