6.2 SingleChildScrollView

SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件，定义如下：

1SingleChildScrollView({
2  this.scrollDirection = Axis.vertical, //滚动方向，默认是垂直方向
3  this.reverse = false, 
4  this.padding, 
5  bool primary, 
6  this.physics, 
7  this.controller,
8  this.child,
9})

除了上一节我们介绍过的可滚动组件的通用属性外，我们重点primary属性：它表示是否使用 widget 树中默认的PrimaryScrollController（MaterialApp 组件树中已经默认包含一个 PrimaryScrollController 了）；当滑动方向为垂直方向（scrollDirection值为Axis.vertical）并且没有指定controller时，primary默认为true。

需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于 Sliver 的延迟加载模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。

示例

下面是一个将大写字母 A-Z 沿垂直方向显示的例子，由于垂直方向空间会超过屏幕视口高度，所以我们使用SingleChildScrollView：

1class SingleChildScrollViewTestRoute extends StatelessWidget {
2  @override
3  Widget build(BuildContext context) {
4    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
5    return Scrollbar( // 显示进度条
6      child: SingleChildScrollView(
7        padding: EdgeInsets.all(16.0),
8        child: Center(
9          child: Column( 
10            //动态创建一个List<Widget>  
11            children: str.split("") 
12                //每一个字母都用一个Text显示,字体为原来的两倍
13                .map((c) => Text(c, textScaleFactor: 2.0,)) 
14                .toList(),
15          ),
16        ),
17      ),
18    );
19  }
20}

运行效果如图6-1所示：

图6-1

← 上一篇

6.1 可滚动组件简介

6.3 ListView