自定义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这个参数，就可以改变这个控件的透明度。