一、ListView

1.1 构造函数：

  1. ListView({
  2.     Key? key,
  3.     Axis scrollDirection = Axis.vertical,
  4.     bool reverse = false,
  5.     ScrollController? controller,
  6.     bool? primary,
  7.     ScrollPhysics? physics,
  8.     bool shrinkWrap = false,
  9.     EdgeInsetsGeometry? padding,
  10.     this.itemExtent,
  11.     this.prototypeItem,
  12.     bool addAutomaticKeepAlives = true,
  13.     bool addRepaintBoundaries = true,
  14.     bool addSemanticIndexes = true,
  15.     double? cacheExtent,
  16.     List<Widget> children = const <Widget>[],
  17.     int? semanticChildCount,
  18.     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  19.     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  20.     String? restorationId,
  21.     Clip clipBehavior = Clip.hardEdge,
  22.   })

1.2 主要参数说明：

scrollDirection：列表的滚动方向，可选值有Axis的horizontal和vertical，可以看到默认是垂直方向上滚动；
reverse：滚动方向如果是垂直方向，默认是向上滚动，通过reverse参数设置其向下滚动
controller：控制器，与列表滚动相关，比如监听列表的滚动事件；
primary：/false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
physics：列表滚动至边缘后继续拖动的物理效果，Android与iOS效果不同。Android会呈现出一个波纹状（对应ClampingScrollPhysics），而iOS上有一个回弹的弹性效果（对应BouncingScrollPhysics）。如果你想不同的平台上呈现各自的效果可以使用AlwaysScrollableScrollPhysics，它会根据不同平台自动选用各自的物理效果。如果你想禁用在边缘的拖动效果，那可以使用NeverScrollableScrollPhysics；
shrinkWrap：该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false 。默认情况下，ListView会在滚动方向尽可能多的占用空间。当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。
padding：列表内边距。
itemExtent：子元素长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能（因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置）；
prototypeItem：如果我们知道列表中的所有列表项长度都相同但不知道具体是多少，这时我们可以指定一个列表项，该列表项被称为 prototypeItem（列表项原型）。指定 prototypeItem 后，可滚动组件会在 layout 时计算一次它延主轴方向的长度，这样也就预先知道了所有列表项的延主轴方向的长度，所以和指定 itemExtent 一样，指定 prototypeItem 会有更好的性能。注意，itemExtent 和prototypeItem 互斥，不能同时指定它们。
addAutomaticKeepAlives：addAutomaticKeepAlives参数表示当关闭屏幕时Item是否进行垃圾回收，默认为true。
addRepaintBoundaries：该属性表示是否将列表项（子组件）包裹在RepaintBoundary组件中。RepaintBoundary 读者可以先简单理解为它是一个”绘制边界“，将列表项包裹在RepaintBoundary中可以避免列表项不必要的重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效（具体原因会在本书后面 Flutter 绘制原理相关章节中介绍）。如果列表项自身来维护是否需要添加绘制边界组件，则此参数应该指定为 false。
cacheExtent：预渲染区域长度，ListView会在其可视区域的两边留一个cacheExtent长度的区域作为预渲染区域（对于ListView.build或ListView.separated构造函数创建的列表，不在可视区域和预渲染区域内的子元素不会被创建或会被销毁）；
children：容纳子元素的组件数组。

1.3 代码示例：

1.4 显示效果：

二、ListView.builder

2.1 构造函数：

  1. ListView.builder({
  2.     Key? key,
  3.     Axis scrollDirection = Axis.vertical,
  4.     bool reverse = false,
  5.     ScrollController? controller,
  6.     bool? primary,
  7.     ScrollPhysics? physics,
  8.     bool shrinkWrap = false,
  9.     EdgeInsetsGeometry? padding,
  10.     this.itemExtent,
  11.     this.prototypeItem,
  12.     required IndexedWidgetBuilder itemBuilder,
  13.     int? itemCount,
  14.     bool addAutomaticKeepAlives = true,
  15.     bool addRepaintBoundaries = true,
  16.     bool addSemanticIndexes = true,
  17.     double? cacheExtent,
  18.     int? semanticChildCount,
  19.     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  20.     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  21.     String? restorationId,
  22.     Clip clipBehavior = Clip.hardEdge,
  23.   })

2.2 主要参数说明：

2.3 代码示例：

2.4 显示效果：

三、ListView.separated

3.1 构造函数：

  1. ListView.separated({
  2.     Key? key,
  3.     Axis scrollDirection = Axis.vertical,
  4.     bool reverse = false,
  5.     ScrollController? controller,
  6.     bool? primary,
  7.     ScrollPhysics? physics,
  8.     bool shrinkWrap = false,
  9.     EdgeInsetsGeometry? padding,
  10.     required IndexedWidgetBuilder itemBuilder,
  11.     required IndexedWidgetBuilder separatorBuilder,
  12.     required int itemCount,
  13.     bool addAutomaticKeepAlives = true,
  14.     bool addRepaintBoundaries = true,
  15.     bool addSemanticIndexes = true,
  16.     double? cacheExtent,
  17.     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  18.     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  19.     String? restorationId,
  20.     Clip clipBehavior = Clip.hardEdge,
  21.   })

3.2 主要参数说明：

3.3 代码示例：

3.4 显示效果：

四、GridView

4.1 构造函数：

  1. GridView({
  2.     Key? key,
  3.     Axis scrollDirection = Axis.vertical,
  4.     bool reverse = false,
  5.     ScrollController? controller,
  6.     bool? primary,
  7.     ScrollPhysics? physics,
  8.     bool shrinkWrap = false,
  9.     EdgeInsetsGeometry? padding,
  10.     required this.gridDelegate,
  11.     bool addAutomaticKeepAlives = true,
  12.     bool addRepaintBoundaries = true,
  13.     bool addSemanticIndexes = true,
  14.     double? cacheExtent,
  15.     List<Widget> children = const <Widget>[],
  16.     int? semanticChildCount,
  17.     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  18.     Clip clipBehavior = Clip.hardEdge,
  19.     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  20.     String? restorationId,
  21.   })

4.2 主要参数说明：

4.3 代码示例：

4.4 显示效果：

五、GridView.builder

5.1 构造函数：

  1. GridView.builder({
  2.     Key? key,
  3.     Axis scrollDirection = Axis.vertical,
  4.     bool reverse = false,
  5.     ScrollController? controller,
  6.     bool? primary,
  7.     ScrollPhysics? physics,
  8.     bool shrinkWrap = false,
  9.     EdgeInsetsGeometry? padding,
  10.     required this.gridDelegate,
  11.     required IndexedWidgetBuilder itemBuilder,
  12.     int? itemCount,
  13.     bool addAutomaticKeepAlives = true,
  14.     bool addRepaintBoundaries = true,
  15.     bool addSemanticIndexes = true,
  16.     double? cacheExtent,
  17.     int? semanticChildCount,
  18.     DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  19.     ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  20.     String? restorationId,
  21.     Clip clipBehavior = Clip.hardEdge,
  22.   })

5.2 主要参数说明：

5.3 代码示例：

5.4 显示效果：

六、Slivers

6.1 SliverList

SliverList：类似于我们之前使用过的ListView；

6.2 SliverFixedExtentList

SliverFixedExtentList：类似于SliverList，只是可以设置滚动的高度；

6.3 SliverGrid

SliverGrid：类似于我们之前使用过的GridView；

6.4 SliverPadding

SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；

6.5 SliverAppBar

SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView；

6.6 SliverSafeArea

SliverSafeArea：设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）

6.7 监听滚动事件ScrollController、NotificationListener

七、PageView

7.1 构造函数：

  1. PageView({
  2.     Key? key,
  3.     this.scrollDirection = Axis.horizontal,
  4.     this.reverse = false,
  5.     PageController? controller,
  6.     this.physics,
  7.     this.pageSnapping = true,
  8.     this.onPageChanged,
  9.     List<Widget> children = const <Widget>[],
  10.     this.dragStartBehavior = DragStartBehavior.start,
  11.     this.allowImplicitScrolling = false,
  12.     this.restorationId,
  13.     this.clipBehavior = Clip.hardEdge,
  14.     this.scrollBehavior,
  15.     this.padEnds = true,
  16.   })

7.2 主要参数说明：

7.3 代码示例：

7.4 显示效果：