flutter开发踩坑记之 SingleChildScrollView

1. 问题描述

下拉刷新时，ios端头部与下面的内容分离，出现大量空白，Android端正常（如图。注解：之所以将上面黄色区域分成两块是因为此页面的头部为固定的 下面的内容与样式可通过后台单独配置，所以没有包裹在一个盒子里，空白下面的内容全部是放在SingleChildScrollView中）

2.问题原因

SingleChildScrollView中有一个属性：physics，此属性接受一个ScrollPhysics类型的对象，它决定可以滚动如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画，或者滑动到边界时，如何显示。默认情况下，flutter会根据具体的平台使用不同的ScrollPhysics对象，显示不同的效果，如当滑到边界时，在ios端显示弹性效果，在andriod端显示微光效果。所以在下拉时，SingleChildScrollView监测到已滑动到边界，在ios端就出现了上述问题，因弹性效果造成的页面出现空白部分。

3.解决办法

配置physics属性，在所有平台下显示同一种效果。flutter SDK中包含两种ScrollPhysics的子类型：
1.ClampingScrollPhysics：andriod下微光效果，
2.BouncingScrollPhysics：iOS下弹性效果

4.SingleChildScrollView组件的属性

const SingleChildScrollView({
  Key key,
  //滚动方向，默认是垂直方向
  this.scrollDirection = Axis.vertical,
  //是否按照阅读方向相反的方向滑动
  this.reverse = false,
  //内容边距
  this.padding,
  //是否使用widget树中默认的PrimaryScrollController
  bool primary,
  //此属性接受一个ScrollPhysics类型的对象，它决定可以滚动如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画，或者滑动到边界时，如何显示。
  //默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，对应不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，
  //而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果，可以显示指定一个固定的ScrollPhysics。
  //Flutter SDK包含两个ScrollPhysics的子类。1.ClampingScrollPhysics：Android下微光效果，2.BouncingScrollPhysics：iOS下弹性效果
  this.physics,
  //此属性接收一个ScrollController对象，ScrollController的主要作用是控制滚动位置和监听滚动事件。
  //默认情况下，Widget树中会有一个默认的PrimaryScrollController，如果子树中的可滚动组件没有显示的指定controller，并且primary属性值为true时，可滚动组件会使用这个默认的ScrollController。
  //这种机制带来的好处是父组件可以控制子树中可滚动的滚动行为，例：scaffold正是使用这种机制在iOS中实现了点击导航回到顶部的功能。
  this.controller,
  this.child,
  //  确定处理拖动行为开始的方式。 如果设置为DragStartBehavior.start，滚动拖动行为将在检测到拖动手势时开始，如果设置为DragStartBehavior.down,时，将在首次检测到停机事件时开始。
  this.dragStartBehavior = DragStartBehavior.start,
  // 将根据此选项裁剪或不裁剪内容
  this.clipBehavior = Clip.hardEdge,
  // 保存并恢复滚动文件的滚边偏移量，如果设置了恢复id，滚动表将保持其当前的滚动偏移量，并在状态恢复期间恢复它。
  this.restorationId,
})

参考文档：https://www.cnblogs.com/upwgh/p/11419310.html