SingleChildScrollView

SingleChildScrollView类似于Android中的ScrollView,它只能接收一个子Widget。定义如下:

  1. SingleChildScrollView({
  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. })

除了通用属性,我们重点看一下reverseprimary两个属性:

  • reverse:该属性API文档解释是:是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左),reverse为true时,那么滑动方向就是从右往左。其实此属性本质上是决定可滚动widget的初始滚动位置是在“头”还是“尾”,取false时,初始滚动位置在“头”,反之则在“尾”,读者可以自己试验。
  • primary:指是否使用widget树中默认的PrimaryScrollController;当滑动方向为垂直方向(scrollDirection值为Axis.vertical)并且controller没有指定时,primary默认为true.

示例

下面是一个将大写字母A-Z沿垂直方向显示的例子,由于垂直方向空间不够,所以使用SingleChildScrollView。:

  1. class 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. }

效果:

image-20180911144506350