https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

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

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

primary 设置为 true 时,不能设置 controller,因为 primary 为 true 时,controller 使用 PrimaryScrollController,这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为,例如,Scaffold 正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。

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

示例

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

  1. import "package:flutter/material.dart";
  2. import 'package:app1/coms/base/empty_null/empty_null.dart';
  3. class MyHomePage extends StatelessWidget {
  4. String str = "abcdefghijklmnopqrstuvwsyz";
  5. @override
  6. Widget build(BuildContext context) {
  7. return Scaffold(
  8. appBar: EmptyNull.appBar(),
  9. body: Scrollbar( //显示滚动条
  10. child: SingleChildScrollView(
  11. child: Column(
  12. children: str.split('').map((v) => Text('单词 $v')).toList(),
  13. ),
  14. ),
  15. ),
  16. );
  17. }
  18. }

运行效果:
image.png