Flutter实现固定在屏幕底部且滚动不消失的SliverAppBar

嘿，我完全懂你遇到的困扰——想让SliverAppBar稳稳待在屏幕底部，不管怎么滚动内容都不消失，但试了半天它却只在滚到页面最底部才肯露面，对吧？

其实问题出在默认的SliverAppBar设计逻辑上：它本来是为顶部导航栏打造的，直接把它丢到CustomScrollView的末尾，它只会在进入视口范围时才显示。要让它固定在底部，我们可以用两种方法实现：

方法一：用SliverPersistentHeader自定义底部固定栏（更灵活） #

这个方法适合你需要完全自定义底部栏样式的场景，步骤很简单：

1. 先定义一个PersistentHeaderDelegate，用来控制底部栏的外观和固定逻辑：

class BottomFixedBarDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    // 这里可以自定义你的底部栏内容，比如加按钮、文本等
    return Container(
      color: Colors.blue,
      padding: EdgeInsets.symmetric(horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("底部固定栏", style: TextStyle(color: Colors.white, fontSize: 18)),
          IconButton(icon: Icon(Icons.add, color: Colors.white), onPressed: () {}),
        ],
      ),
    );
  }

  // 设置底部栏的固定高度
  @override
  double get maxExtent => 60;
  @override
  double get minExtent => 60;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false; // 内容不变的话不需要重建
  }
}

2. 在CustomScrollView中，把这个底部栏放在所有滚动内容的后面，并设置pinned: true：

CustomScrollView(
  slivers: [
    // 你的主要滚动内容，比如一个长列表
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("列表项 $index")),
        childCount: 50,
      ),
    ),
    // 底部固定栏，pinned设为true就会一直固定在屏幕底部
    SliverPersistentHeader(
      pinned: true,
      delegate: BottomFixedBarDelegate(),
    ),
  ],
)

这样设置后，不管你怎么上下滚动列表，底部栏都会牢牢固定在屏幕底部，完全不会消失。

方法二：直接用SliverAppBar实现（适合需要AppBar自带功能的场景） #

如果你想保留SliverAppBar的自带特性（比如leading按钮、actions菜单等），可以直接调整它的参数，把它固定在底部：

CustomScrollView(
  slivers: [
    // 你的滚动内容
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("列表项 $index")),
        childCount: 50,
      ),
    ),
    // 底部固定的SliverAppBar
    SliverAppBar(
      pinned: true, // 关键：设为true才会固定
      backgroundColor: Colors.blue,
      title: Text("底部AppBar"),
      floating: false,
      snap: false,
      expandedHeight: 60, // 展开和收起高度设为一致，避免动画
      collapsedHeight: 60,
      actions: [
        IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
      ],
    ),
  ],
)

这里的核心是pinned: true，同时把expandedHeight和collapsedHeight设为相同值，这样AppBar就不会有展开收起的动画，一直保持固定高度在底部。

两种方法都能解决你的问题，选哪种就看你是否需要SliverAppBar的原生功能啦～

内容的提问来源于stack exchange，提问作者Aquiko