Flutter报A RenderFlex overflowed by xx pixels on the bottom 问题解决方案

正文前先吐个槽，Flutter的布局设计是真的复杂，用java轻轻松松搞定的布局，Flutter会出现各种各样的问题而且难搞。

问题背景

在设计界面的时候，会出现row和column互相嵌套的情况，而内部的children组件对齐或者高度等问题就开始暴露出来了，这里稍微做一下总结，不保证能解决所有的问题，还是希望能够提供一下解决问题的思路。

解题思路

在进入主题之前先有另外一个问题，有这么一个情景：一个Row中有3个Column，中间的Column高度最大，要求第一个对齐是start，最后一个center。如果你没有遇到过这种情景的话，可能会觉得，前面一个Column中主轴使用start，后面一个使用center，这是一个正确的思路，但是这里会有一个问题，如果Row是没有定义高度的话，内部三个Column的高度是自适应的，并且不会以最长的Column看齐，也就是说，前后两个无论怎么调整主轴，由于高度已经定死了，是不会有变化的，要有空间，才能进行调整。
那么有没有解决方案呢？答案是有的。有一个组件叫做IntrinsicHeight，它能够调整child到固定的高度，将其嵌套到row的外部，row能够得到一个高度，前后两个Column便能够调整主轴对齐方式。
且慢，还有一步！如果你的Column内只有一个组件，不用看这里也可以，如果有多个部件，那么你可能需要把Row内部的所有Children都调整到同样的高度，这时要用到row交叉轴的一个对齐方式，stretch。这个参数的作用是，让children填满交叉轴方向，所有未定义高度的Column便会变成最长的那个child的高度。注意，这个是在外面的row有高度的前提下才会出现我们想要的效果，如果row不是定高的，那么会拉到屏幕高度。

突入主题

上面这个只是本文讲的问题的一个前戏，笔者也是解决了前面一个问题，才接着遇到这个问题，部件溢出的现象大概像是这样，
下面会有黄黑相间的斜线，常常是我们使用Row和Column出现的，因为这两个组件都是不会滚动的，过长的时候建议使用ListView等可以滚动的组件，如果是Row和Column嵌套时出现问题，那么建议在children组件加上Expand，这个组件能够将child自动适应高度或宽度。

根据网上找的资料来看，这个问题的原因是，在高度不确定的组件中使用了高度不确定的组件，很多情况下，都是可以用expanded来解决，但是我这个有点特殊，
这里将不重要的代码折叠了，可以看到，我这里Row连续嵌套了两个Column，再嵌套了一个Wrap，从运行结果来看应该是没有问题了，仔细一看，Wrap里面少了几个组件啊！初步判断是计算高度出问题了，但是为什么会这样还不知道原因（我太菜了）。经过一段尝试，发现去掉spaceing和runSpacing属性可以解决上面的问题，猜测是两个spacing增加的高度没有被计算进去，导致高度溢出。暂时是解决问题了，去掉这两个属性，我们可以额外使用padding来实现上面的效果。