【Flutter学习】可滚动组件之ScrollView
⼀，概述
ScrollView 是⼀个带有滚动的视图组件。
⼆，组成部分
ScrollView 由三部分组成：
Scrollable - 它监听各种⽤户⼿势并实现滚动的交互设计。可滚动Widget都直接或间接包含⼀个Scrollable widget，因此它们包括⼀些共同的属性，我们在此统⼀介绍⼀下：
Scrollable({
...
this.axisDirection = AxisDirection.down,
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 - 滚动视图滚动的轴。
flutter sdkshrinkWrap → 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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论