关键组件
CustomScrollView, SliverOverlapAbsorber, SliverPersistentHeader关键内容 TLDR
SliverOverlapAbsorber 包住 pinned为 true 的组件 可以被CustomScrollView 忽略高度。
以下的全部内容的都为了阐述上面这句话。初阶 Flutter 开发知道这句话或许可以节省数天研究时间。
pinned为 true 的组件：SliverPersistentHeader 和 SliverAppBar
被 CustomScrollView 忽略高度可以使的其他的 Sliver 组件与 pinned 为 true 的组件有重叠效果
- 正文
先进行定义 TopBar：顶部栏， TabBar：吸顶的标签栏。 对上说效果进行说明： 刚进入页面时，TopBar 下是透明的，一般业务上用来显示 banner 或者重要的广告。 向上滑动页面，TabBar 滑动到顶部时吸顶 并且位于 TopBar 以下。 代码的结构如下
CustomScrollView(
controller: _controller,
slivers: [
/// 顶部栏，固定在顶部
SliverOverlapAbsorber(
handle: SliverOverlapAbsorberHandle(),
sliver: SliverAppBar(
pinned: true:
...
)
),
/// 比如 Banner，金刚区等
SliverToBoxAdapter(
child: Image.asset(
"./assets/images/sky.webp",
fit: BoxFit.cover,
),
),
/// 其他一些 Sliver 组件
...
///吸顶的标签栏
SliverPersistentHeader(
pinned: true,
delegate: TabBarDelegate()
),
/// 列表
SliverList(),
],
)
在这里例子中，CutomScrollView 会忽略 SliverOverlapAbsorber 组件高度，使得之后的组件计算开始布局的位置从SliverOverlapAbsorber的上边缘开始计算。这样当 TopBar 透明时可以看到完整的 Banner 大图 。
如何使得 TabBar 吸顶并且位于 TopBar 下面呢，可以使用 SliverAppBar 作为 TopBar， 使用 SliverPersistentHeader 作为 TabBar。将两个组件中的 pinned 属性都设置为 true 之后，当页面上滑时当 TabBar 滑到 TopBar 下方时便会固定住不再向上滑动。
换个便于记忆的简单说法是，在 CustomScrollView 中，如果想要忽略高度用 SliverOverlapAbsorber ，想要吸顶就用 SliverPersistentHeader。
TopBar 底部用到大图，为什么不用 SliverAppBar 的 flexibleSpace 属性？
使用 SliverAppBar 的特性需要修改属性较多，而且把 顶部 Banner 与 SliverAppBar 混在一起并不优雅。如果只能用 flexbleSpace 实现可以如此
SliverAppBar(
pinned: true,
expandedHeight: 200,
title: TopBar()
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: Banner(),
),
)
TabBar 怎么吸顶的？
TabBar 之所以能吸顶是使用的 SliverPersistentHeader 中使用了 RenderSliverPinnedPersistentHeader。
class RenderSliverPinnedPersistentHeader{
void performLayout() {
...
geometry = SliverGeometry(
scrollExtent: maxExtent,
paintOrigin: constraints.overlap,
paintExtent: math.min(childExtent, effectiveRemainingPaintExtent),
layoutExtent: layoutExtent,
maxPaintExtent: maxExtent + stretchOffset,
maxScrollObstructionExtent: minExtent,
cacheExtent: layoutExtent > 0.0 ? -constraints.cacheOrigin + layoutExtent : layoutExtent,
hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.
);
}
...
}
吸顶关键是设置 paintOrigin 属性。paintOrigin 注释如下
/// The visual location of the first visible part of this sliver relative to
/// its layout position.
官方的注释说的比较严谨且抽象，我尝试解释下 直译是 sliver 的可见位置相对于布局位置。布局位置可以理解为 sliver 占据的空间，可见位置就是其绘制的位置。如果 paintOrigin 为 0，那么可见位置就是布局位置，就像普通的不吸顶的 sliver 一样。 paintOrigin: constraints.overlap 意为从距离布局位置顶部 constraints.overlap 的距离开始绘制。constraints.overlap 是两个页面重叠的距离，如果当前吸顶组件的上面没有其他可吸顶组件，则这个值就是 0，如何之前有其他的吸顶组件，比如 TopBar 也是吸顶组件，这个值就与 TopBar 的高度相同，如是 TabBar 可以悬停在 TopBar 下面。有时学习为了解释一个概念，又会引入了另外一个新概念，导致复杂度成倍增加，有时甚至会引入几十个甚至几百个新概念，尽管如此，坚持下去，才能真正理解知识，而不是原地空转。
有个 SliverPhysicalParentData.paintOffset 属性 与 paintOrigin 类似的概念也对 sliver 组件的绘制位置有影响。在 不吸顶的组件（如 SliverToBoxAdapter ）中 paintOffset 为 SliverConstraint.scrollOffset在 可以悬停吸顶的组件 SliverPersistentHeader 中 paintOffset 是 Offset(0, 0)
final SliverPhysicalParentData childParentData = child!.parentData! as SliverPhysicalParentData;
childParentData.paintOffset = Offset(0, 0);
为什么 SliverOverlapAbsorber 高度会被忽略？
SliverOverlapAbsorber 实际渲染的是 RenderSliverOverlapAbsorber 。在 RenderSliverOverlapAbsorber.performLayout 中设定高度代码如下
child!.layout(constraints, parentUsesSize: true);
final SliverGeometry childLayoutGeometry = child!.geometry!;
geometry = childLayoutGeometry.copyWith(
scrollExtent: childLayoutGeometry.scrollExtent - childLayoutGeometry.maxScrollObstructionExtent,
layoutExtent: math.max(0, childLayoutGeometry.paintExtent - childLayoutGeometry.maxScrollObstructionExtent),
);
可以看到 SliverOverlapAbsorber 的高度依赖于 child 的信息 scrollExtent - maxScrollObstructionExtent。
child 是什么？当 SliverOverlapAbsorber 中包含的 SliverAppBar 属性 pinned 设置为 true 时，child 实际为 RenderSliverPinnedPersistentHeader
void performLayout() {
...
geometry = SliverGeometry(
scrollExtent: maxExtent,
paintOrigin: constraints.overlap,
paintExtent: math.min(childExtent, effectiveRemainingPaintExtent),
layoutExtent: layoutExtent,
maxPaintExtent: maxExtent + stretchOffset,
maxScrollObstructionExtent: minExtent,
cacheExtent: layoutExtent > 0.0 ? -constraints.cacheOrigin + layoutExtent : layoutExtent,
hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.
);
}
可以看到 scrollExtent 是 maxExtent， maxScrollObstructionExtent 是 minExtent，当 SliverAppBar 不设置 expandedHeight 时 maxExtent 与 minExtent 相等，最终 SliverOverlapAbsorber 中的 geometry 中 scrollExtent 和 layoutExtent 为 0。从而 CustomScrollView 忽略了 SliverOverlapAbsorber 高度。 注意 只有 SliverOverlapAbsorber 包含的 SliverAppBar组件 pinned=true 时才会忽略 SliverAppBar 的高度，并且忽略的部分依据 maxExtent 和 minExtent 相等时才完全忽略。
- 结语
重要内容总结为一句话和一些 限定语
SliverOverlapAbsorber 可以让 CustomScrollView 忽略 其包含的固定组件高度
SliverOverlapAbsorber 包含的 SliverAppBar 需要设置为 pinned=true
SliverAppBar 的 maxExtent 和 minExtent 相等时 整个 SliverAppBar 的高度都会被忽略
记住了组件的作用在用到时就可以快速完成大部分工作了，再了解了组件原理就可以更好的完成工作了，当效果偏离预想时也可以纠偏找到正确的思路。
- 团队介绍
「三翼鸟数字化技术平台-商城」负责搭建门店数字化转型工具，包括：海尔智家体验店小程序、三翼鸟工作台APP、商家中心等产品形态，通过数字化工具，实现门店的用户上平台、交互上平台、交易上平台、交付上平台，从而助力海尔
