新建一个Flutter项目，在代码中不断添加控件，会使得页面的高度超过屏幕可以容纳的高度，此时并不会自动滚动，而是会出现错误提示超过屏幕高度（“BOTTOM OVERFLOWD BY xxx PIXELS”）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
Center( child: new Column( children: [ 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, ), ], ), ); |
报错的显示效果如下：
解决方法为使用 SingleChildScrollView 对象对视图进行包裹，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
SingleChildScrollView( child: Center( child: new Column( children: [ 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, ), ], ), ), ); |
显示效果如下：
