自定义AppBar实现滚动渐变

1、

滑动过程中AppBar在不透明和透明之间进行变化

自定义AppBar实现滚动渐变_第1张图片

 

自定义AppBar实现滚动渐变_第2张图片

2、

为l使AppBar能够滚动,我们需要一个列表,这个列表足够长,以至于我们能够监听列表的滚动,来改变顶部的AppBar的背景色

添加底部的列表,让AppBar可以滑动

自定义AppBar实现滚动渐变_第3张图片

自定义AppBar实现滚动渐变_第4张图片

3、移除listview和顶部的padding

这个padding可能是开发团队考虑到了手机的适配,比如iphonX的适配,提前把顶部的安全区域预留下来了。但是对于我们来说,是需要这个banner在顶部的位置进行展示的,所以,需要将顶部的banner进行移除

自定义AppBar实现滚动渐变_第5张图片

 

那么在flutter里面,如何将顶部的banner移除呢?那么需要用到一个类,这个类是MediaQuery,它由一个removePadding()这个函数

 

但是MediaQuery.removePadding并没有生效

自定义AppBar实现滚动渐变_第6张图片

 

因为它不知道该移除哪边,所以需要加上removeTop:true这句话

自定义AppBar实现滚动渐变_第7张图片

4、监听列表的滚动

在flutter里面监听列表的滚动需要用到一个类:NotificationListener()

 

添加滚动监听

自定义AppBar实现滚动渐变_第8张图片

虽然没有发生滚动,但是在不停地打印距离,而且是伴随着banner滚动发生的,所以说,有一个可能是Notification监听到了swiper它的滚动,所以需要做一个处理,只需要在listview滚动的时候才触发这样一个监听

自定义AppBar实现滚动渐变_第9张图片

 

 

过滤listview的监听以后,如果不滑动时就不会一直触发监听打印日志了

自定义AppBar实现滚动渐变_第10张图片

 

只有滑动的时候会打印日志

自定义AppBar实现滚动渐变_第11张图片

5、实现一个AppBar,可以悬浮在上面

需要自定义一个AppBar

需要自定义一个AppBar在listView上面进行显示,所以需要一个Flutter布局的一个类,这个布局是Stack

在Flutter里面,需要改变元素透明度的时候,需要用要给Opacity来包裹它。

Stack布局中,后面的元素会覆盖上面的元素,所以使用Opacity包裹的元素要放在Stack的下面

 

显示一个悬浮的AppBar

自定义AppBar实现滚动渐变_第12张图片

 

6、改变appbar的透明度

动态改变alpha的透明度:

自定义AppBar实现滚动渐变_第13张图片

 

需要根据滑动监听动态改变AppBar的值

自定义AppBar实现滚动渐变_第14张图片

 

默认情况下是透明的:

自定义AppBar实现滚动渐变_第15张图片

 

移动过程中,AppBar逐渐变为白色的背景

自定义AppBar实现滚动渐变_第16张图片

 

自定义AppBar实现滚动渐变_第17张图片

 

实际开发中,应该移除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这个参数,就可以改变这个控件的透明度。

你可能感兴趣的:(笔记,flutter)