Flutter 如何实现带底部重叠组件的固定SliverAppBar并解决滚动问题

通过CustomScrollView搭配各类Sliver组件实现指定交互效果，预期效果参考图如下：

使用SliverAppBar开发时遇到两个核心问题：

• 页面滚动时标题栏会被隐藏
• 滚动过程中SliverAppBar的bottom属性挂载的组件出现溢出问题

已提供最小可复现代码，核心代码如下：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              pinned: true,
              floating: false,
              elevation: 0,
              expandedHeight: 300.0,
              title: Text("Title"),
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  child: Image.network(
                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1VQ7GnY9bpez5Ec8Ce2acx-K3KqaDg91i6A&usqp=CAU'),
                ),
                collapseMode: CollapseMode.parallax,
              ),
              bottom: PreferredSize(
                preferredSize: const Size.fromHeight(0.0),
                child: Transform.translate(
                  offset: const Offset(0, 50),
                  child: Container(
                    color: Colors.blue,
                    padding: EdgeInsets.only(
                        top: 20, bottom: 20, left: 50, right: 50),
                    margin: EdgeInsets.only(left: 20, right: 20, bottom: 20),
                    child: Text("Section"),
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],
                  title: Center(
                    child: Text('$index',
                        style: TextStyle(
                            fontWeight: FontWeight.normal,
                            fontSize: 50,
                            color: Colors.greenAccent[400])
                        ),
                  ),
                ),
                childCount: 51,
              ),
            )
          ],
        ),
      ),
    );
  }
}

1. 滚动时标题栏被隐藏问题 #

• SliverAppBar设置pinned: true后，折叠后的标题栏本应固定在顶部不会被完全隐藏，出现隐藏问题通常是布局计算异常导致标题被挤出可视区域。
• 核心调整：保留pinned: true配置，移除对子组件的Transform.translate偏移操作，避免破坏Sliver的布局计算逻辑。

2. bottom挂载组件溢出问题 #

溢出的直接原因是**PreferredSize声明的高度和子组件实际渲染高度不匹配**：

• 你当前将preferredSize设置为0.0，但内部容器包含上下20的内边距、偏移量50，实际高度远大于声明的0，Sliver按0高度预留空间，自然会出现溢出。
• Transform.translate属于非布局性偏移，不会改变组件实际占用的布局空间，还会导致子组件超出SliverAppBar的底部边界，滚动时出现和内容重叠的问题。

调整后可直接运行的核心配置 #

将原有SliverAppBar部分替换为以下代码即可同时解决两个问题：

SliverAppBar(
  pinned: true, // 固定折叠后的标题栏
  floating: false,
  elevation: 0,
  expandedHeight: 300.0,
  title: const Text("Title"),
  // 精准匹配子组件实际高度，无需偏移
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(80.0), // 预留偏移+组件实际高度
    child: Padding(
      padding: const EdgeInsets.only(top: 50), // 用Padding实现原偏移效果，不破坏布局计算
      child: Container(
        color: Colors.blue,
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
        margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        child: const Text("Section"),
      ),
    ),
  ),
  flexibleSpace: FlexibleSpaceBar(
    background: Image.network(
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1VQ7GnY9bpez5Ec8Ce2acx-K3KqaDg91i6A&usqp=CAU',
      fit: BoxFit.cover, // 避免背景图拉伸溢出
    ),
    collapseMode: CollapseMode.parallax,
  ),
),

额外优化说明 #

• 若需要下拉时立刻展开AppBar，可将floating设置为true，符合移动端常规交互习惯。
• 不要用Transform系列组件做Sliver子组件的位置偏移，所有位置调整优先用Padding、Margin等会参与布局计算的属性，避免出现不可预期的溢出、遮挡问题。
• 上述配置实现的效果为：展开时显示300高度的背景图，滚动折叠后顶部固定显示标题栏，下方固定显示蓝色Section组件，完全匹配参考图的交互逻辑。

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