手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

花了半天时间实现了flutter swiper。

首页 > Flutter >

在学习flutter的过程中,遇到了几个对我来说难度有点大的问题,比如swiper、弹出菜单(含子菜单)等。所幸都一一实现了。

 
swiper的实现相对比较简单,其实就相当于是两个模块:1、pagination 2、实际滚动内容
1的话其实相对简单,只是一个listview.generate就完事了,不过因为我们中间用了连接字符串,所以当屏幕大小可变时,这个连接字符串的长度就要可控。所以我用了 '--' * 100,然后限制maxLine=1,overflow =clip,就处理完了
 
2、最早没有采用滚动的时候,是使用了图片切换,这时候无论怎么做动画效果都没用,比如AnimatedContainer,无效;AnimatedController也没用。毕竟只是换了一个图片地址,容器大小都没变。所以最后还是尝试采用了SingleChildScrollView,然后复杂的就是做联动了。
做联动经历了3个小阶段
a. 点击pagination,采用_controller.animateTo,这样还有动画跳转,跳转到指定page页面。
b. 滑动图片时的手势操作,这个相对比较简单,我用了genstureDetector,只判断了横向的手指更新和滑动结束。更新的时候,只计算 delta.dx,即横向移动的距离,负值则页数减1,正值加1,这样一页页的跳转就完成了。
c.最复杂的就来了:因为我用的是macos的代码,前面是鼠标手势,如果用触摸板,那么刚才的手势就完全无效了,而且触摸板滚动的距离非常长可能一下子会有5~6页,整个下午就卡在这里。
 
第一次尝试,是用_controller.addListener(),确实可以看到 _controller.offset在移动,但addListener只能看到数值在变化,却无法判断停下来。
第二次尝试,是用_controller.position.isScrollingNotifier.addListener,这时候可以判断 !_controller.position.isScrollingNotifier.value,如果无值代表停下来。刚开始还OK,但如果一更新代码,再滚动,立即 报错,说_controller.positions.isNotEmpty 不正常。而且这个listener,是要放在:WidgetsBinding.instance?.addPostFrameCallback中的。所以暂时放弃
第三次尝试:在找了google之后,找到了这里:[Flutter Web] NotificationListener ScrollNotification is bugged with SingleChildScrollView (All possible ScrollNotifications registering on each frame) · Issue #44732 · flutter/flutter (github.com),在ScrollView上包一层NotificationListener,并通过 onNotification进行判断,当scrollNotification is ScrollEndNotification时,获取当前页码并进行跳转。这时候要注意用Future.delayed处理。因为当 跳转新页时,可能 scrollNotification.metrics.pixels还在更新,会导致跳转可能跳一半,变成卡屏效果。而delayed 150ms 之后。还有一个弹回的小效果。
 
至此,全部完成。做个笔记~~~



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):