【Flutter学习】可滚动组件之ScrollView

一，概述　　

　　ScrollView 是一个带有滚动的视图组件。

二，组成部分

ScrollView 由三部分组成：

Scrollable - 它监听各种用户手势并实现滚动的交互设计。可滚动Widget都直接或间接包含一个Scrollable widget，因此它们包括一些共同的属性，我们在此统一介绍一下：
```
Scrollable({
  ...
  this.axisDirection = AxisDirection.down,
  this.controller,
  this.physics,
  @required this.viewportBuilder, //后面介绍
})
```
参数含义：
- axisDirection：滚动方向。
  - 主轴和纵轴
    
    在可滚动widget的坐标描述中，通常将滚动方向称为主轴，非滚动方向称为纵轴。由于可滚动widget的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理。
- physics：此属性接受一个ScrollPhysics对象，它决定可滚动Widget如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画；或者滑动到边界时，如何显示。默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，应用不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果，可以显式指定，Flutter SDK中包含了两个ScrollPhysics的子类可以直接使用：
  - ClampingScrollPhysics：Android下微光效果。
  - BouncingScrollPhysics：iOS下弹性效果。
- controller：此属性接受一个ScrollController对象。ScrollController的主要作用是控制滚动位置和监听滚动事件。默认情况下，widget树中会有一个默认的PrimaryScrollController，如果子树中的可滚动widget没有显式的指定controller并且primary属性值为true时（默认就为true），可滚动widget会使用这个默认的PrimaryScrollController，这种机制带来的好处是父widget可以控制子树中可滚动widget的滚动，例如，Scaffold使用这种机制在iOS中实现了"回到顶部"的手势。我们将在本章后面“滚动控制”一节详细介绍ScrollController。
Viewport - 它通过在滚动视图内仅显示一部分小部件来实现滚动的可视化设计。
在很多布局系统中都有ViewPort的概念，在Flutter中，术语ViewPort（视口），如无特别说明，则是指一个Widget的实际显示区域。例如，一个ListView的显示区域高度是800像素，虽然其列表项总高度可能远远超过800像素，但是其ViewPort仍然是800像素。
Slider - 它们是可以组合以创建各种滚动效果的小部件，如列表，网格和扩展标题。

三，ScrollView 有以下常用属性：

cacheExtent → double - 视口在可见区域之前和之后有一个区域，用于缓存用户滚动时即将可见的项目。
controller → ScrollController - 一个可用于控制滚动视图滚动到的位置的对象。
physics → ScrollPhysics - 滚动视图应如何响应用户输入。
primary → bool - 是否是与父级关联的主滚动视图。
reverse → bool - 滚动视图是否在阅读方向上滚动。
scrollDirection → Axis - 滚动视图滚动的轴。
shrinkWrap → bool - 应该根据正在查看的内容确定滚动视图的范围。

注：ScrollView 是一个抽象类，通常使用 CustomScrollView。

四，示例

new CustomScrollView(
    shrinkWrap: true,
    // 内容
    slivers: <Widget>[
      new SliverPadding(
             padding: const EdgeInsets.all(20.0),
              sliver: new SliverList(
                 delegate: new SliverChildListDelegate(
                   <Widget>[
                        const Text('A'),
                        const Text('B'),
                        const Text('C'),
                        const Text('D'),
                   ],
                 ),
              ),
     ],
)

五，可滚动的Widget

ListView

一个可滚动的列表
NestedScrollView

一个可以嵌套其它可滚动widget的widget
GridView

一个可滚动的二维空间数组
SingleChildScrollView

有一个子widget的可滚动的widget，子内容超过父容器时可以滚动。
Scrollable

实现了可滚动widget的交互模型，但不包含UI显示相关的逻辑
Scrollbar

一个Material Design 滚动条，表示当前滚动到了什么位置
CustomScrollView

一个使用slivers创建自定义的滚动效果的ScrollView
NotificationListener

一个用来监听树上冒泡通知的widget。
ScrollConfiguration

控制可滚动组件在子树中的表现行为
RefreshIndicator

Material Design下拉刷新指示器，包装一个可滚动widget

【Flutter学习】可滚动组件之ScrollView

一，概述

二，组成部分

三，ScrollView 有以下常用属性：

四，示例

五，可滚动的Widget

ListView

一，概述　　