如需转载，请注明出处：Flutter学习笔记（24）--SingleChildScrollView滚动组件 在我们实际的项目开发中，经常会遇到页面UI内容过多，导致手机一屏展示不完的情况出现，以Android为例，在Android中遇到这类情况的做法通常就是使用ScrollView将内容包裹起来，如果不做可滑动的处理，Android上的表现为页面的部分内容无法展示，而在Flutter中，如果内容过多无法展示完全，屏幕的边界会给我们一个OVERFLOWED的警告提示，在Flutter中我们通常使用SingleChildScrollView处理滑动，这里需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模式，所以如果预计视口可能包含超出屏幕尺寸太多的内容时使用SingleChildScrollView将会导致性能差的问题，此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。
基于Sliver的延迟构建模式：
通常可滚动组件的子组件可能会非常多，占用的总高度也会非常大，如果要一次性将子组件全部构建出将会导致性能差的问题出现，为此，Flutter中提出一个Sliver（中文为"薄片"的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动组件可以将子组件分成好多个薄片（Sliver），只有当Sliver出现在视口时才会去构建它，这种模型也成为"基于Sliver的延迟构建模型"。可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView
import 'package:flutter/material.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'SingleChildScrollView Demo', home: new Scaffold( appBar: AppBar( title: new Text('SingleChildScrollView Demo'), ), body: new Center( child: new Column( children: <Widget>[ Container( width: 300.0, height: 200.0, color: Colors.blue, ), Container( width: 300.0, height: 200.0, color: Colors.yellow, ), Container( width: 300.0, height: 200.0, color: Colors.pink, ), Container( width: 300.0, height: 200.0, color: Colors.blue, ), Container( width: 300.0, height: 200.0, color: Colors.yellow, ), Container( width: 300.0, height: 200.0, color: Colors.pink, ), Container( width: 300.0, height: 200.0, color: Colors.blue, ), ], ), ), ), ); } }