Flutter使用NestedScrollView如何避免适配屏幕的body滚动到header下方

问题原因 #

该问题由NestedScrollView的默认滚动逻辑导致：body内部的CustomScrollView默认自带独立滚动能力，即使内容总高度远小于可显示区域，依然会响应滚动手势，出现内容偏移到SliverAppBar下方的异常效果。

修复方案 #

仅需修改body内CustomScrollView的两个配置即可，不会影响SliverAppBar原有折叠、拉伸效果：

• 添加shrinkWrap: true：让CustomScrollView的高度跟随子元素总高度自适应，而非强制撑满父容器
• 添加physics: const NeverScrollableScrollPhysics()：禁用CustomScrollView自身的滚动能力，所有滚动事件完全交由外层NestedScrollView统一处理，保证和SliverAppBar的滚动联动逻辑正常

修改后的核心代码片段 #

return CustomScrollView(
  // 新增以下两个配置项
  shrinkWrap: true,
  physics: const NeverScrollableScrollPhysics(),
  slivers: <Widget>[
    SliverPadding(
      padding: EdgeInsets.only(left: 16, right: 16, top: 11),
      sliver: SliverList(
        delegate: SliverChildListDelegate(List.generate(
          6,
              (index) => Text('Tab One: $index'),
        )),
      ),
    ),
  ],
);

效果验证 #

修改后：

• 当body内容高度小于可显示区域时，body无滚动能力，内容固定在SliverAppBar下方，不会出现偏移到header下方的问题
• 当body内容高度超过可显示区域时，NestedScrollView全局滚动生效，SliverAppBar可正常折叠，body内容跟随滚动的逻辑不受影响

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