自定义AppBar实现滚动渐变
1、
滑动过程中AppBar在不透明和透明之间进行变化
2、
为l使AppBar能够滚动,我们需要一个列表,这个列表足够长,以至于我们能够监听列表的滚动,来改变顶部的AppBar的背景色
添加底部的列表,让AppBar可以滑动
3、移除listview和顶部的padding
这个padding可能是开发团队考虑到了手机的适配,比如iphonX的适配,提前把顶部的安全区域预留下来了。但是对于我们来说,是需要这个banner在顶部的位置进行展示的,所以,需要将顶部的banner进行移除
那么在flutter里面,如何将顶部的banner移除呢?那么需要用到一个类,这个类是MediaQuery,它由一个removePadding()这个函数
但是MediaQuery.removePadding并没有生效
因为它不知道该移除哪边,所以需要加上removeTop:true这句话
4、监听列表的滚动
在flutter里面监听列表的滚动需要用到一个类:NotificationListener()
添加滚动监听
虽然没有发生滚动,但是在不停地打印距离,而且是伴随着banner滚动发生的,所以说,有一个可能是Notification监听到了swiper它的滚动,所以需要做一个处理,只需要在listview滚动的时候才触发这样一个监听
过滤listview的监听以后,如果不滑动时就不会一直触发监听打印日志了
只有滑动的时候会打印日志
5、实现一个AppBar,可以悬浮在上面
需要自定义一个AppBar
需要自定义一个AppBar在listView上面进行显示,所以需要一个Flutter布局的一个类,这个布局是Stack
在Flutter里面,需要改变元素透明度的时候,需要用要给Opacity来包裹它。
Stack布局中,后面的元素会覆盖上面的元素,所以使用Opacity包裹的元素要放在Stack的下面
显示一个悬浮的AppBar
6、改变appbar的透明度
动态改变alpha的透明度:
需要根据滑动监听动态改变AppBar的值
默认情况下是透明的:
移动过程中,AppBar逐渐变为白色的背景
实际开发中,应该移除AppBar顶部的边距
7、为了实现AppBar有一个滚动渐变的效果,由透明变成不透明,由不透明变为透明,使用了listview。
由于listview是作为首页的根元素存在的,所以说它顶部会有一个padding,通过MediaQuery.removePadding进行移除
为了实现对列表的监听,使用了NotificationListener,NotificationListener它接收一个scrollNotification的监听,列表每次滚动的时候都会回调这个函数,这个函数会检查它的根widget是否进行滚动,检查它的子widget是否进行滚动,依次进行检查,所以说它会监听很多很多widget,因为这里只监听外部的widget,所以将深度设置为0。NotificationListener在app加载的时候也会回调onNotification,但是scrollNotification类型不是ScrollUpdateNotification,所以只需要判断scrollNotification is ScrollUpdateNotification,也就是滚动的时候进行回调
在对alpha值进行设置的时候,根据offset进行设置,对于alpha值进行一个保护逻辑,如果alpha值大于1的时候设置为1,小于0的时候设置为0,最后通过setState()对alpha值进行修改。修改之后,通过对opacity属性赋值才能有效。在对某个控件进行透明度控制的时候,都可以通过Opacity进行包裹,通过改变opacity这个参数,就可以改变这个控件的透明度。