正文前先吐个槽,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交叉轴的一个对齐方式,stret