5-5 自定义AppBar实现滚动渐变


5-5 自定义AppBar实现滚动渐变
appBar颜色的渐变,又不透明 变为透明
5-5 自定义AppBar实现滚动渐变

首先需要一个滚动的列表。

列表用ListView来实现。里面接受children[]数组。
5-5 自定义AppBar实现滚动渐变
然后将我们的Swiper放进去。
5-5 自定义AppBar实现滚动渐变
把上面改成ListView
5-5 自定义AppBar实现滚动渐变
在下面放一个Container。设置一个高度为800.为了让列表可以滚动。
5-5 自定义AppBar实现滚动渐变

5-5 自定义AppBar实现滚动渐变
这样我们的列表就可以滚动了。
5-5 自定义AppBar实现滚动渐变
ListView在iphoneX上的适配问题。自动把顶部的安全区域预留下来。
5-5 自定义AppBar实现滚动渐变
但是我们希望是这样的。所以我们需要把padding移除掉。
5-5 自定义AppBar实现滚动渐变
那么在flutter里面,怎么把padding移除呢?
5-5 自定义AppBar实现滚动渐变
Center是沾满整个屏幕的宽度的,这里把Center直接去掉。把ListView提上来
5-5 自定义AppBar实现滚动渐变
还有一个关键性的参数,要remove掉哪一边
5-5 自定义AppBar实现滚动渐变

我们要移除顶部的padding,所以这里设置removeTop为true
5-5 自定义AppBar实现滚动渐变
查看效果。就可以看到顶部的Padding没有了。
5-5 自定义AppBar实现滚动渐变

监听列表滚动,来改变appBar的背景色

在flutter里面,监听列表的滚动 需要用到一个类。NotificationListener

5-5 自定义AppBar实现滚动渐变

把listVIew放进去,做它的child。就可以监听里面所有列表组件的滚动。
5-5 自定义AppBar实现滚动渐变
在这里监听scrollNptification事件,每次滚动的是时候就会回调,传递一个参数。
5-5 自定义AppBar实现滚动渐变
根据这个参数做一个判断,滚动的距离是0的时候也会触发这个函数。所以说,我们为了一些效率的提倡。只有当滚动是ScrollUpdateNotification的时候才做处理。
5-5 自定义AppBar实现滚动渐变
调用_onScroll这个函数。
5-5 自定义AppBar实现滚动渐变

参数offset局势滚动的距离
5-5 自定义AppBar实现滚动渐变
打印这个滚动的距离
5-5 自定义AppBar实现滚动渐变

列表没有发生滚动却在不停的打印距离
5-5 自定义AppBar实现滚动渐变
而且是伴随着banner滚动打印的
5-5 自定义AppBar实现滚动渐变
所以有一种可能就是监听了swipper的滚动。所以需要做一个处理,只需要在ListView滚动的时候才去做触发事件。所以要过滤出ListView
scrollNotification的depth深度为0的。也就是第0个元素也就是ListVIew
5-5 自定义AppBar实现滚动渐变

5-5 自定义AppBar实现滚动渐变

现在就 只有滚动的时候才会打印了。
5-5 自定义AppBar实现滚动渐变

自定义appBar悬浮在swipper上

scaffold是可以定义appBar的,但是写的比较死,不建议,我们希望appBar悬浮在轮播图上。所以需要自定义appBar
5-5 自定义AppBar实现滚动渐变

所以需要用到Flutter布局的一个类,Stack,然后把元素移动到Stack的children里面去。
5-5 自定义AppBar实现滚动渐变
Stack里面的,前面的元素会被叠在下面,后面的元素会被叠到上面。
我们要改变透明度就可以用Opacity来包裹。
5-5 自定义AppBar实现滚动渐变
Opacity有个必选的参数没有传
5-5 自定义AppBar实现滚动渐变
就是opacity这个参数,这里设置为1
5-5 自定义AppBar实现滚动渐变
这样appBar就是在首页进行展示了。
5-5 自定义AppBar实现滚动渐变

滑动改变透明度

在上面定义一个变量。Alpha默认设置为0
5-5 自定义AppBar实现滚动渐变

appBar的透明度,用这个变量
5-5 自定义AppBar实现滚动渐变

在onScroll监听里面,动态设置alpha

在最上面定义滚动最大距离的常量 为100。大于100就完全变成白色。
5-5 自定义AppBar实现滚动渐变
滚动距离除以滚动最大值。得到额alpha的值。然后setState设置appBarAlpha的值 也就是透明度为0或者1
5-5 自定义AppBar实现滚动渐变

默认情况下是不可见的,北京是透明的
5-5 自定义AppBar实现滚动渐变
滚动,appBar出现。
5-5 自定义AppBar实现滚动渐变

 

结束

 

5-5 自定义AppBar实现滚动渐变

上一篇:android studio 打包报错:Generate Signed APK: Errors while building APK. You can find the errors in the 'Messages' view.


下一篇:3.Java日志框架slf4j、jcl、jul、log4j1、log4j2、logback大总结