1、如何利用NestedScrollView 进行吸顶效果?
在Flutter中,你可以使用NestedScrollView和SliverAppBar来实现吸顶效果。以下是我们常常在搜索里面搜索到的类型模版,来使用NestedScrollView以到达实现吸顶效果的步骤:
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
// 配置可折叠的头布局
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
// 在这里创建你的SliverAppBar
return [
SliverAppBar(
// 设置吸顶效果的属性
// 设置为true以启用吸顶效果
pinned: true,
// 其他属性设置
),
];
},
//页面的主体内容
body: SingleChildScrollView(
...
),
),
);
}
2、我们采用这样的方式去写的时候会发生什么问题?以及如何一步步去解决问题
在我们使用会出现body被header遮挡的问题。 导致滑动到顶部我们的body 在有一部分展示不全。如下图:
发生以上的原因是因为NestedScrollView滑动的时候他无法预支header的高度问题,所以我们使用“SliverOverlapAbsorber+ SliverOverlapInjector”来解决问题,这两个小部件是在处理header和body之间的重叠问题时被使用到。
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
pinned: true,
// 其他属性设置
),
),
];
},
body: Builder(
builder: (BuildContext context) {
return CustomScrollView(
slivers: [
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
...
],
);
},
),
),
);
}
3、注意事项
使用这个我们会发现如何只有一个header的时候,一般问题就会被解决。但是我们有多个header怎么办呢?在测试的过程中发现虽然返回的是一个数组,但是数组里面我们只能使用一个 ”SliverOverlapAbsorber“ 去监听,如果写入多个SliverOverlapAbsorber会造成严重的卡顿,最终大概率会发生死机的情况,如何去解决这个问题,我们可以使用一下俩种方式:
3.1 使用 sliver_tools
这个插件,允许将多个sliver分组在一起以便它们可以作为单个小部件返回。
@override
Widget build(BuildContext context) {
return MultiSliver(
pushPinnedChildren: false, // defaults to false
children: [
SliverPersistentHeader(...),
SliverList(...),
],
);
}
3.2 使用SliverMainAxisGroup
此小部件实现了在单个 ScrollView 中逐个放置条的功能,所有sliver都在组本身的边界内绘制(即 SliverPercientHeaders 不会在所有sliver提供的滚动范围之外绘制)
具体的文档说明大家可以点击查看 https://docs.google.com/document/d/1e2bdLSYV_Dq2h8aHpF8mda67a...
使用以上俩种方式我们能很好的解决NestedScrollView 滚动吸顶。但是第二次方式对于flutter 的版本要求比较高哟。