Flutter实战：可滚动组件布局的良好实践

初入Flutter，经常直接将根组件设为Column，不断向其中添加组件，组件堆叠到一定高度溢出屏幕，屏幕底部会显示一段很小的“乱码”，不必惊慌，它只是告诉你溢出了多少。这时希望溢出容器内容产生滚动条，然而Flutter并没有传统web那么方便，所谓一个overflow属性搞定，我们不得不给Column包裹额外一层可滚动组件作为容器。

Flutter中的可滚动组件有：SingleChildScrollView、ListView和GridView，具体每个组件的作用暂不细说，这里只要知道它们都是滚动组件，当子组件高度超过视口高度时会自动变为可滚动状态，且给子组件提供的可用高度是无限的，这点造就了常犯的典型错误一和典型错误二。

最稳妥的滚动组件布局实践，就是将Column与滚动组件“隔离”，给Column包裹一层限制容器，防止Column尽可能占满可用高度的特性和可滚动组件的无限高度冲突（建议先搞清楚典型错误一）。如下是一段稳健的代码，完成了弹性高度布局：

Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {