滚动组件SingleChildScrollView

而在Flutter中，如果内容过多无法展示完全，屏幕的边界会给我们一个OVERFLOWED的警告提示，在Flutter中我们通常使用SingleChildScrollView处理滑动，这里需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模式，所以如果预计视口可能包含超出屏幕尺寸太多的内容时使用SingleChildScrollView将会导致性能差的问题，此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。 SingleChildScrollView构造：

const SingleChildScrollView({
    super.key,
    this.scrollDirection = Axis.vertical,//方向
    this.reverse = false,//reverse为true时，那么滑动方向就是从右往左
    this.padding,
    this.primary,//指是否使用widget树中默认的PrimaryScrollController,primary默认为true
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
    this.clipBehavior = Clip.hardEdge,
    this.restorationId,
    this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  })

• physics

1、此属性接受一个ScrollPhysics类型的对象，它决定可以滚动如何响应用户操作，比如用户滑动完抬起手指后，继续执行动画，或者滑动到边界时，如何显示。

2、默认情况下，Flutter会根据具体平台分别使用不同的ScrollPhysics对象，对应不同的显示效果，如当滑动到边界时，继续拖动的话，在iOS上会出现弹性效果，

3、而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果，可以显示指定一个固定的ScrollPhysics。

4、Flutter SDK包含两个ScrollPhysics的子类。1.ClampingScrollPhysics：Android下微光效果，2.BouncingScrollPhysics：iOS下弹性效果

• controller 1、此属性接收一个ScrollController对象，ScrollController的主要作用是控制滚动位置和监听滚动事件。

2、默认情况下，Widget树中会有一个默认的PrimaryScrollController，如果子树中的可滚动组件没有显示的指定controller，并且primary属性值为true时，可滚动组件会使用这个默认的ScrollController。

3、这种机制带来的好处是父组件可以控制子树中可滚动的滚动行为，例：scaffold正是使用这种机制在iOS中实现了点击导航回到顶部的功能。

例子：

import 'package:flutter/material.dart';
class SvPage extends StatelessWidget {
  const SvPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    final colors = [
      Colors.green,
      Colors.lightBlue,
      Colors.yellow,
      Colors.red,
    ];
    return MaterialApp(
      title: 'SingleChildScrollView',
      home: Scaffold(
        appBar: AppBar(title: const Text('SingleChildScrollView'),),
        body: SingleChildScrollView(
          physics: BouncingScrollPhysics(),
          child: Center(
            child: Column(
              children: arr.map((e) => Container(
                alignment: Alignment.center,
                width: double.infinity,
                height: 200,
                color: colors[e % colors.length],
                child: Text('$e'),
              )).toList(),
            ),
          ),
        ),
      ),

    );
  }
}