# 6.2 SingleChildScrollView
SingleChildScrollView
类似于Android中的ScrollView
,它只能接收一个子组件,定义如下:
SingleChildScrollView({
this.scrollDirection = Axis.vertical, //滚动方向,默认是垂直方向
this.reverse = false,
this.padding,
bool primary,
this.physics,
this.controller,
this.child,
})
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
除了上一节我们介绍过的可滚动组件的通用属性外,我们重点primary
属性:它表示是否使用 widget 树中默认的PrimaryScrollController
(MaterialApp 组件树中已经默认包含一个 PrimaryScrollController 了);当滑动方向为垂直方向(scrollDirection
值为Axis.vertical
)并且没有指定controller
时,primary
默认为true
。
需要注意的是,通常SingleChildScrollView
只应在期望的内容不会超过屏幕太多时使用,这是因为SingleChildScrollView
不支持基于 Sliver 的延迟加载模型,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用SingleChildScrollView
将会非常昂贵(性能差),此时应该使用一些支持Sliver延迟加载的可滚动组件,如ListView
。
# 示例
下面是一个将大写字母 A-Z 沿垂直方向显示的例子,由于垂直方向空间会超过屏幕视口高度,所以我们使用SingleChildScrollView
:
class SingleChildScrollViewTestRoute extends StatelessWidget {
Widget build(BuildContext context) {
String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
return Scrollbar( // 显示进度条
child: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Center(
child: Column(
//动态创建一个List<Widget>
children: str.split("")
//每一个字母都用一个Text显示,字体为原来的两倍
.map((c) => Text(c, textScaleFactor: 2.0,))
.toList(),
),
),
),
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
运行效果如图6-1所示:
请作者喝杯咖啡
版权所有,禁止私自转发、克隆网站。