Flutter SliverAppBar中FlexibleSpaceBar内容重叠问题求助

问题根源 #

你的代码里几个配置冲突导致了重叠：

• 手动用FlexibleSpaceBar.createSettings强制设置currentExtent: 0和minExtent: 0，打乱了SliverAppBar的自动布局计算逻辑。
• CollapseMode.pin会让FlexibleSpaceBar的内容固定在顶部，不会被工具栏遮挡，和你的需求完全相反。
• expandedHeight与flexibleSpace的高度配置不匹配，引发布局尺寸计算混乱。

修正后的代码 #

SliverAppBar(
  primary: true,
  floating: true,
  collapsedHeight: 80,
  toolbarHeight: 80,
  backgroundColor: Colors.amber,
  pinned: true,
  expandedHeight: 320, // 工具栏高度(80) + 展开区域高度(240)
  elevation: 0,
  leading: Text("leading"),
  title: Text("the title"),
  actions: [Text("some actions!")],
  flexibleSpace: FlexibleSpaceBar(
    collapseMode: CollapseMode.parallax, // 滚动时内容随之上移，最终被工具栏遮挡
    stretchModes: [StretchMode.zoomBackground],
    title: Text("settings"),
  ),
)

关键配置说明 #

• 移除FlexibleSpaceBar.createSettings：让SliverAppBar根据滚动状态自动管理flexibleSpace的高度变化，避免手动参数导致的计算错误。
• collapseMode: CollapseMode.parallax：滚动时flexibleSpace的内容会以视差效果向上移动，当滚动到顶部时，内容会被固定的工具栏完全遮挡，符合你的需求。如果想要更直接的遮挡效果，也可以替换为CollapseMode.none，内容会直接向上移出视口。
• 确保expandedHeight等于toolbarHeight加上你需要的展开区域高度，这样布局计算会更准确，不会出现尺寸溢出或重叠。

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