Flutter如何防止SingleChildScrollView滚动超顶部露出白色背景

修正后问题表述 #

在Flutter开发中使用SingleChildScrollView实现滚动布局时，滚动超出顶部边界会露出默认白色背景，与自定义的内容区域颜色产生视觉冲突。因无法用英文准确描述该交互现象，附上动图供直观参考，以下是当前的实现代码，求可行的修复方案。

当前问题代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Container(
        color: Colors.amberAccent,
        height: LayoutUtils.getScreenHeight(context) + 1000, // 获取屏幕高度后额外增加1000单位
      )),
    );
  }

可行修复方案 #

方案1：统一Scaffold背景色（最简单） #

露白的本质是Scaffold默认背景色为白色，滚动越界时会显示下层的Scaffold背景，直接将Scaffold背景色设置为和内容容器一致即可：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent, // 与内容容器颜色保持一致
      body: SingleChildScrollView(
          child: Container(
        color: Colors.amberAccent,
        height: LayoutUtils.getScreenHeight(context) + 1000,
      )),
    );
  }

方案2：关闭越界效果 #

如果不需要任何滚动越界反馈，可以通过自定义ScrollBehavior关闭越界效果：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScrollConfiguration(
        behavior: const ScrollBehavior().copyWith(overscroll: false),
        child: SingleChildScrollView(
            child: Container(
          color: Colors.amberAccent,
          height: LayoutUtils.getScreenHeight(context) + 1000,
        )),
      ),
    );
  }

方案3：替换滚动物理效果为弹性滚动 #

如果想要保留类似iOS的弹性越界动效、去掉安卓默认的发光越界白边，可以给SingleChildScrollView设置BouncingScrollPhysics：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
          child: Container(
        color: Colors.amberAccent,
        height: LayoutUtils.getScreenHeight(context) + 1000,
      )),
    );
  }

内容的提问来源于stack exchange，提问作者Quang Khải Đàm