前端开发进阶篇——Flutter滚动组件

1.滚动组件简介

        当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter则会提示Overflow错误。为此，Flutter提供了多种可滚动组件（Scrollable Widget）用于显示列表和长布局。

        可滚动组件都直接或间接包含一个Scrollable组件，因此它们包括一些共同的属性:

        Scrollable({        
          ...
          this.axisDirection = AxisDirection.down,
          this.controller,
          this.physics,
          @required this.viewportBuilder,})

• axisDirection滚动方向。

• physics：此属性接受一个ScrollPhysics类型的对象，它决定可滚动组件如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画；或者滑动到边界时，如何显示。默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，应用不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果，可以显式指定一个固定的ScrollPhysics，Flutter SDK中包含了两个ScrollPhysics的子类，他们可以直接使用：

            1）ClampingScrollPhysics：Android下微光效果。

            2）BouncingScrollPhysics：iOS下弹性效果。

• controller：此属性接受一个ScrollController对象。ScrollController的主要作用是控制滚动位置和监听滚动事件。默认情况下，Widget树中会有一个默认的PrimaryScrollController，如果子树中的可滚动组件没有显式的指定controller，并且primary属性值为true时（默认就为true），可滚动组件会使用这个默认的PrimaryScrollController。这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为，例如，Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。我们将在本章后面“滚动控制”一节详细介绍ScrollController。

2. Scrollbar

3. ListView

       ListView是最常用的可滚动组件之一，它可以沿一个方向线性排布所有子组件。默认构造函数有一个children参数，它接受一个Widget列表（List），这种方式适合只有少量的子组件的情况。

        ListView.builder适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建。ListView.builder的核心参数：

• itemBuilder：它是列表项的构建器，类型为IndexedWidgetBuilder，返回值为一个widget。当列表滚动到具体的index位置时，会调用该构建器构建列表项。

• itemCount：列表项的数量，如果为null，则为无限列表。

        ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器。

4. GridView

        GridView可以构建一个二维网格列表。其默认构造方法中gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列。SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。

        1）SliverGridDelegateWithFixedCrossAxisCount

        该子类实现了一个横轴为固定数量子元素的layout：

        SliverGridDelegateWithFixedCrossAxisCount({        
          @required double crossAxisCount, 
          double mainAxisSpacing = 0.0,
          double crossAxisSpacing = 0.0,
          double childAspectRatio = 1.0,})

• crossAxisCount：横轴子元素的数量。

• mainAxisSpacing：主轴方向的间距。

• crossAxisSpacing：横轴方向子元素的间距。

• childAspectRatio：子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。  

        GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的GridView。

        2）SliverGridDelegateWithMaxCrossAxisExtent

        该子类实现了一个横轴子元素为固定最大长度的layout。其参数比SliverGridDelegateWithFixedCrossAxisCount多了一个maxCrossAxisExtent，其为子元素在横轴上的最大长度，之所以是“最大”长度，是因为横轴方向每个子元素的长度仍然是等分的。

        GridView.extent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent，我们通过它可以快速的创建纵轴子元素为固定最大长度的的GridView。

5. CustomScrollView

SingleChildScrollView

        SingleChildScrollView只能接收一个子组件。定义如下：

        SingleChildScrollView({        
          this.scrollDirection = Axis.vertical, //滚动方向，默认是垂直方向
          this.reverse = false, 
          this.padding, 
          bool primary, 
          this.physics, 
          this.controller,
          this.child,})