
appBar颜色的渐变,又不透明 变为透明

列表用ListView来实现。里面接受children[]数组。

然后将我们的Swiper放进去。

把上面改成ListView

在下面放一个Container。设置一个高度为800.为了让列表可以滚动。


这样我们的列表就可以滚动了。

ListView在iphoneX上的适配问题。自动把顶部的安全区域预留下来。

但是我们希望是这样的。所以我们需要把padding移除掉。

那么在flutter里面,怎么把padding移除呢?

Center是沾满整个屏幕的宽度的,这里把Center直接去掉。把ListView提上来

还有一个关键性的参数,要remove掉哪一边

我们要移除顶部的padding,所以这里设置removeTop为true

查看效果。就可以看到顶部的Padding没有了。

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

把listVIew放进去,做它的child。就可以监听里面所有列表组件的滚动。

在这里监听scrollNptification事件,每次滚动的是时候就会回调,传递一个参数。

根据这个参数做一个判断,滚动的距离是0的时候也会触发这个函数。所以说,我们为了一些效率的提倡。只有当滚动是ScrollUpdateNotification的时候才做处理。

调用_onScroll这个函数。

参数offset局势滚动的距离

打印这个滚动的距离

列表没有发生滚动却在不停的打印距离

而且是伴随着banner滚动打印的

所以有一种可能就是监听了swipper的滚动。所以需要做一个处理,只需要在ListView滚动的时候才去做触发事件。所以要过滤出ListView
scrollNotification的depth深度为0的。也就是第0个元素也就是ListVIew


现在就 只有滚动的时候才会打印了。

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

所以需要用到Flutter布局的一个类,Stack,然后把元素移动到Stack的children里面去。

Stack里面的,前面的元素会被叠在下面,后面的元素会被叠到上面。
我们要改变透明度就可以用Opacity来包裹。

Opacity有个必选的参数没有传

就是opacity这个参数,这里设置为1

这样appBar就是在首页进行展示了。

在上面定义一个变量。Alpha默认设置为0

appBar的透明度,用这个变量

在最上面定义滚动最大距离的常量 为100。大于100就完全变成白色。

滚动距离除以滚动最大值。得到额alpha的值。然后setState设置appBarAlpha的值 也就是透明度为0或者1

默认情况下是不可见的,北京是透明的

滚动,appBar出现。

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