Flutter问题：NestedScrollView内容体被AppBar/Slivers遮挡消失

为什么会出现这种默认行为？ #

NestedScrollView的核心设计目标是实现嵌套滚动联动——让顶部的Sliver组件（比如SliverAppBar）和body区域的滚动内容协同工作。默认情况下，它的内部滚动视口是覆盖整个屏幕的（包括SliverAppBar占据的空间），这样才能支持SliverAppBar的折叠、浮动、滚动消失等交互效果。

即使你设置了pinned: true，内部滚动区域的计算依然包含SliverAppBar的位置，所以你的Container会被允许滚动到AppBar下方，看起来像是"消失"了。同时，因为body是放在可滚动的内部视图里，你给Container设置的height会被滚动视图的布局逻辑忽略——滚动视图会让子组件在整个视口范围内滚动，而不是固定在剩余空间里。

如何让内容不滑到Sliver区域，仅在超出时滚动？ #

要实现"内容固定在AppBar下方，仅当内容超出剩余空间时才滚动"的效果，我们可以用SliverFillRemaining配合SingleChildScrollView来约束布局：

return Scaffold(
  body: NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
      return [
        SliverAppBar(
          pinned: true,
          title: Text("AppBar Title"),
        )
      ];
    },
    body: SliverFillRemaining(
      // 禁用自身的滚动体，让子组件的滚动来处理超出内容
      hasScrollBody: false,
      child: SingleChildScrollView(
        child: Container(
          color: Colors.blue,
          height: 100, // 现在这个高度会被正确识别
          child: Text("This won't disappear"),
        ),
      ),
    ),
  ),
);

为什么这个方案有效？

• SliverFillRemaining会自动占据SliverAppBar下方的剩余屏幕空间，确保内容不会延伸到AppBar的区域里。
• 设置hasScrollBody: false后，它不会自己处理滚动，而是把滚动逻辑交给内部的SingleChildScrollView——只有当Container的高度超过剩余空间时，才会触发滚动，否则内容固定在AppBar下方，不会滑到AppBar下面。

关于SliverFillRemaining的"占用超出空间"问题 #

如果之前使用SliverFillRemaining时遇到了内容被拉伸填充剩余空间的情况，那是因为它默认会让子组件填充整个剩余区域。解决这个问题的关键就是设置hasScrollBody: false，同时用SingleChildScrollView包裹内容，这样子组件会按照自身高度布局，只有超出时才滚动，不会被强制拉伸。

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