目录
在这一篇中，我们使用了 listview 将几个 gridview 组合在一起实现了不同可滑动组件的粘合，但是这里必须要设置禁止 gridview 的滑动，防止多个滑动组件的冲突。这种方式写起来不太方便，事实上 flutter 提供了 customscrollview 来粘合多个滑动组件，并且可以实现更有趣的滑动效果。
customscrollview 简介
customscrollview的常用属性如下：
slivers：最重要的属性，由多个sliverxx组件组成的数组，包括如sliverlist（对应listview），slivergrid（对应gridview）等，如果普通组件无法直接使用，而需要使用slivertoboxadapter包裹。- reverse：是否反向滚动，如果为 true，则反方向滚动。
- scrolldirection：滚动方向，可以是横向或纵向。
改造原代码
页面结构需要重新调整，将原先的 gridview 改成 slivergrid，然后顶部区域需要使用 slivertoboxadapter进行包裹。每个区域的标题栏也需要单独使用slivertoboxadapter 包裹起来。slivertoboxadapter使用很简单，只需要将原有的组件设置为其 child 属性即可。
widget _headergridbuttons() {
double height = 144;
list> buttons = gridmockdata.headergrids();
return slivertoboxadapter(
child: container(
height: height,
margin: edgeinsets.fromltrb(margin, margin, margin, margin / 2),
decoration: boxdecoration(
borderradius: borderradius.circular(4.0),
gradient: lineargradient(
begin: alignment.topcenter,
end: alignment.bottomcenter,
colors: [
color(0xff56af6d),
color(0xff56aa6d),
]),
),
child: center(
child: row(
mainaxisalignment: mainaxisalignment.spaceevenly,
children: buttons
.map((item) => _getmenus(item['icon'], item['name'],
color: colors.white))
.tolist()),
),
),
);
}
widget _getmenutitle(string title) {
return slivertoboxadapter(
child: container(
margin: edgeinsets.fromltrb(margin, margin, margin, margin / 2),
padding: edgeinsets.all(margin),
decoration: boxdecoration(
borderradius: borderradius.circular(4.0),
color: colors.white,
),
child: text(
title,
style: textstyle(color: colors.grey[700]),
),
),
);
}
gridview 我们之前使用的是 grid.count() 方法，这里只需要更换为 slivergrid.count()即可，参数基本相同，只是我们可以将之前禁止滑动的代码删除了。
//在 slivergrid 中无需下面两行代码禁止滑动 shrinkwrap: true, physics: neverscrollablescrollphysics(),
让导航栏更有趣
在 flutter 中提供了一个 sliverappbar专门用于 customscrollview，该导航栏基本属性和 appbar 类似，但有些其他的属性：
floating：浮动，即便是滚动视图不在顶部，sliverappbar也会跟随滚动出现。snap：手指放开时会根据当前状态决定是否展开或收起。如果为false，则导航栏会停留在上次滑动位置。pinned：滚动到顶部后，导航栏是否可见，默认是false。若为false，则滚动出顶部后导航栏将消失。expandedheight：导航栏展开后的高度。flexiblespace：扩展弹性空间，即导航栏滑动时的收起或展开组件，可以有背景图片和导航栏文字，当滑动到顶部后只显示文字导航栏，当下滑后，会逐步显示背景内容，从而实现动态导航栏的效果。
sliverappbar _getappbar(string title) {
return sliverappbar(
pinned: true,
expandedheight: 200,
brightness: brightness.dark,
flexiblespace: flexiblespacebar(
title: text(title),
background: image.network(
'https://ss1.bdstatic.com/70cfvxsh_q1ynxgkpowk1hf6hhy/it/u=688497718,308119011&fm=26&gp=0.jpg',
fit: boxfit.cover,
),
),
);
}
改造后的代码
改造后需要使用 container 包裹，以设置背景颜色，多个 sliver 组件依次排列就可以完成拼接后一起滚动，相比使用 listview 来说会更简便，且效果更好。
@override
widget build(buildcontext context) {
return container(
color: colors.white,
child: customscrollview(
slivers: [
_getappbar('个人中心'),
_headergridbuttons(),
_getmenutitle('金融理财'),
_gridbuttons(gridmockdata.financegrids()),
_getmenutitle('生活服务'),
_gridbuttons(gridmockdata.servicegrids()),
_getmenutitle('购物消费'),
_gridbuttons(gridmockdata.thirdpartygrids()),
],
),
);
}
其他效果
除了上述的效果外，flutter 还提供了sliverpersistentheader悬停头部组件用于显示悬停的表头。具体可以参考对应文档，这在需要展示顶部的功能切换栏或者表格表头的时候很有用。
总结
本篇介绍了 customscrollview 的基本用法以及 sliverappbar 的使用，通过 sliverappbar 可以让导航栏的滑动更有趣。在实际开发过程中，推荐在有多个滑动组件组合的时候优先使用 customscrollview。
以上就是android flutter实现有趣的页面滚动效果的详细内容，更多关于android flutter页面滚动效果的资料请关注其它相关文章！
