【Flutter学习】滚动视图之ScrollView

一，概述　　

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

二，组成部分

ScrollView 由三部分组成：

• Scrollable - 它监听各种用户手势并实现滚动的交互设计。
• Viewport - 它通过在滚动视图内仅显示一部分小部件来实现滚动的可视化设计。
• 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