如何将“SliverPersistentHeader”固定在顶部，直到向下滚动后到达“SliverList”的第一项？

Posted 2023-02-23

【中文标题】如何将“SliverPersistentHeader”固定在顶部，直到向下滚动后到达“SliverList”的第一项？

【英文标题】：How to keep “SliverPersistentHeader” pinned to the top until item one of “SliverList” is reached after scrolling down?

【发布时间】：2020-05-24 06:36:08

【问题描述】：

我在 CustomScrollView 中使用 SliverPersistentHeader 和 SliverList。在到达 SliverList 的第一项（索引：0）之前，我不希望我的 SliverPersistentHeader 下降。即使我在 sliverlist 的索引 50，当我向下滚动时，标题仍然会下降。有什么捷径可以实现吗？

这就是我得到的 ==>> https://i.imgur.com/yl48Kx2.gif

class Home extends StatelessWidget 
  @override
  Widget build(BuildContext context) 

    return SafeArea(
      child: Material(
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              delegate: MySliverAppBar(expandedHeight: 250),
              pinned: true,
              floating: true,
            ),
            SliverSafeArea(
              sliver: SliverAppBar(
                pinned: true,
                backgroundColor: Color(0xffA2B8A1),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(
                  title: Text("Index: $index"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  

【参考方案1】：

尝试将pinned 设置为true 并将floating 保持为false。 这是每个人的工作。

浮动：标题是否应该立即增长 如果用户反转滚动方向，则再次返回。

Pinned：是否将标题粘贴到开头 视口达到其最小尺寸后。

【参考方案2】：

只需将 float 设置为 false。否则请上传您的 AppBar 类