Sliver App Bar滚动收缩时如何始终显示bottom区域

要实现滚动时始终显示进度条的需求，你需要将进度条从SliverAppBar的bottom属性中剥离出来，作为独立的Sliver组件放在列表中，同时固定SliverAppBar的位置。具体实现如下：

• 移除SliverAppBar中的bottom配置
• 给SliverAppBar添加pinned: true，确保它收缩后固定在顶部
• 在SliverAppBar之后添加一个SliverToBoxAdapter来承载你的进度条组件

修改后的代码示例：

Widget _buildSliverAppBar(BuildContext context) {
  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        actions: actionWidgets,
        pinned: true, // 关键配置：让AppBar收缩后固定在顶部
        expandedHeight: 50.0,
        flexibleSpace: FlexibleSpaceBar(
          title: _buildAppTitle(context),
          centerTitle: centerTitle,
        ),
      ),
      // 将进度条作为独立的Sliver组件放在此处
      SliverToBoxAdapter(
        child: const ProgressIndicatorWidget(),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return sliverBody;
          },
          childCount: 20,
        ),
      ),
    ]
  );
}

原理说明 #

SliverAppBar的bottom属性属于AppBar的内部布局范畴，会跟随AppBar的滚动收缩逻辑一起变化。将进度条独立为单独的Sliver组件后，配合SliverAppBar的pinned配置，它会始终固定在AppBar下方，不会随AppBar的收缩动作被隐藏。

如果你的进度条需要根据滚动状态动态调整样式，可以改用SliverPersistentHeader自定义delegate，实现更灵活的布局控制。

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