扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在移动端,各个平台或 UI 系统的原始指针事件模型基本都是一致,即:一次完整的事件分为三个阶段:手指按下、手指移动、和手指抬起,而更高级别的手势(如点击、双击、拖动等)都是基于这些原始事件的。
在成都做网站、网站制作中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手,突出企业的产品/服务/品牌,帮助企业锁定精准用户,提高在线咨询和转化,使成都网站营销成为有效果、有回报的无锡营销推广。成都创新互联公司专业成都网站建设10年了,客户满意度97.8%,欢迎成都创新互联客户联系。
Flutter 中可以使用 Listener widget 来监听原始触摸事件,它也是一个功能性 widget。
Listener 的常见属性
用法如下:
加载更多需要对 ListView 进行监听,所以需要进行监听器的设置,在 State 中进行监听器的初始化。
2、使用上述的 Listener 来监听,通过 Listener 的 onPointerMove(手指在屏幕上滑动)来监听滑动的距离,当滑动到底部时加载更多数据
效果比较多的是动态体验,可以编写后查看效果;
参考自 CSDN的Flutter入门课程
ListView、GridView的组件控制器是ScrollController,我们可以通过它来获取视图的滚动信息,并且可以调用里面的方法来更新视图的滚动位置。
另外,通常情况下,我们会根据滚动的位置来改变一些Widget的状态信息,所以ScrollController通常会和StatefulWidget一起来使用,并且会在其中控制它的初始化、监听、销毁等事件。
我们来做一个案例,当滚动到1000位置的时候,显示一个回到顶部的按钮:
如果我们希望监听什么时候开始滚动,什么时候结束滚动,这个时候我们可以通过 NotificationListener 。
案例: 列表滚动, 并且在中间显示滚动进度
最近一个项目要实现可以无限循环的PageView,主要思路是在初始化pageview的list的时候在开始和结尾多加一个结尾和开头的widget,当滑动到开头和结尾的时候手动进行页面的切换,详细可以搜索pageview无限轮播。
这种方法有一个要点就是要维护两个索引,一个是内部list的索引,一个是外部显示的索引,由于list的容量是比显示的数量多2的,所以如果要在外部进行一些比如指示器或者计时器功能要进行和页面同步显示或者切换页面操作时,需要将显示的索引转换成list的索引。
不过网上说的都是一些比较简单的实现,看到比较多的就是当滑动到要手动切换的时候进行一个时延,这样可以避免直接切换页面造成的卡顿和跳动现象。但是存在一个问题,如果要同时实现一个跟随页面切换的指示器,就会出现当页面切换过去之后指示器才会跟着过去,因为页面切换的时候执行了时延,而时延之后才会真正改变索引,此时才会setstate,之后指示器才能响应到索引的切换,但是如果在时延之前就切换的话又会出现指示器先行的情况。因此这种方法其实是存在一些问题的。
所以解决这个问题的关键在于如何进行页面切换的判断。这里可以有两种思路实现,第一种是实现viewpage的onpagechanged方法,在里面进行逻辑的判断,然后用controller来进行页面跳转,不过这种方法存在当controller跳转的时候又会回调onpagechanged,所以就会出现多次对索引不必要操作,而且如果有比如计时器等额外的功能的话可能不方便将页面逻辑分开,而且依旧无法解决指示器延迟问题,同时也很难进行细粒度的操作。
第二种方法我们就要去看pageview的源码了,从源码的角度来解决问题才是正确的方法。首先我们点进去pageview的源码
看到这里其实已经有一些思路了,我们之前难点在于重写了onpagechanged方法导致问题无法很好的解决,现在我们找到了onpagechanged调用的地方,只要找办法避免掉就可以实现了。
当然这里我们要说到NotificationListener,以及flutter对应的冒泡事件传输机制,这里大家可以去看看这篇 文章 。
我来总结一下,其实就是flutter对于notification这个组件,有一中事件规则叫冒泡传递,底层的notification如果在它的 onNotification写的逻辑中返回是false以及它不是根结点,就会去向上遍历寻找它的祖先notification组件,知道遇到root节点或者某一个返回true,则事件传递结束。
而且在onNotification中可以对多种事件进行监听和处理,所以我们可以把对viewpage页面跳转对索引处理的逻辑写在这里,而且我们可以分别处理比如滑动开始的start事件和结束的end事件,分别进行细粒度的逻辑的处理,这样就可以在外部进行操作和别的功能实现了。
因此不仅无限轮播事件可以通过这种方法来解决,如果有其他的操作也可以这样进行处理,而且因为我们没有传入onpagechanged方法,所以不存在多次调用的问题,pageview那里判断onpagechanged是null方法就不会进去了,会直接我们写在pageview外面的notification的逻辑。
最后的结构大概这样
我是在StatefulWidget里面设置了一个全局的List,然后动态改变List里面的内容,然后使用setState刷新,结果发现没有用,点击一下虽然会多出一个新的Item,但是还是原来那个,就是List长度、内容不同,Widget显示的是同一个Widget。
比如:九宫格添加图片,第一个是添加图片,点击添加图片把图片放到List里面,然后setState刷新,结果发现页面没变化,触碰添加图片Item,就会多出一个添加图片Item。
根据Flutter基于不可变数据的原理,我们直接把List换一个引用,创建一个新的List。
首先要在main.dart文件里创建全局路由监听对象
传入MaterialApp的navigatorObservers属性里
在需要的页面里使用routeObserver加入监听:
1.在该页面的State混入RouteAware
2.重写didChangeDependencies方法加入监听
3.在页面dispose时销毁监听
4.重写需要监听的事件方法
当Push到该页面时:
当Pop到该页面时:
当该页面Push到其他页面时:
当该页面被Pop时:
2022.6.11:
注册监听入参类型有变化
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流