首页 > 移动平台 > 详细

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

时间:2020-01-14 13:47:36      阅读:119      评论:0      收藏:0      [点我收藏+]


技术分享图片
appBar颜色的渐变,又不透明 变为透明
技术分享图片

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

列表用ListView来实现。里面接受children[]数组。
技术分享图片
然后将我们的Swiper放进去。
技术分享图片
把上面改成ListView
技术分享图片
在下面放一个Container。设置一个高度为800.为了让列表可以滚动。
技术分享图片

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

我们要移除顶部的padding,所以这里设置removeTop为true
技术分享图片
查看效果。就可以看到顶部的Padding没有了。
技术分享图片

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

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

技术分享图片

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

参数offset局势滚动的距离
技术分享图片
打印这个滚动的距离
技术分享图片

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

技术分享图片

现在就 只有滚动的时候才会打印了。
技术分享图片

自定义appBar悬浮在swipper上

scaffold是可以定义appBar的,但是写的比较死,不建议,我们希望appBar悬浮在轮播图上。所以需要自定义appBar
技术分享图片

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

滑动改变透明度

在上面定义一个变量。Alpha默认设置为0
技术分享图片

appBar的透明度,用这个变量
技术分享图片

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

在最上面定义滚动最大距离的常量 为100。大于100就完全变成白色。
技术分享图片
滚动距离除以滚动最大值。得到额alpha的值。然后setState设置appBarAlpha的值 也就是透明度为0或者1
技术分享图片

默认情况下是不可见的,北京是透明的
技术分享图片
滚动,appBar出现。
技术分享图片

 

结束

 

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

原文:https://www.cnblogs.com/wangjunwei/p/12191464.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!