【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