本篇描述的是基础布局，先放上一个效果图:
最终效果图
在屏幕中央位置居中放上三个自定义图标。
在构建基础布局时，经常使用的拆解方法是洋葱法，自低向上一层一层拆解UI元素。
层次拆解
拆解原则
- 找行、列
- 找网格
- 找重叠元素
- 找选项卡
- 找需要对齐、填充和边框的区域
拆解过程
这个UI布局比较简单，一眼就可以看出：不需要网格，没有重叠的元素然后也没有选项卡。只需要行和列，适当的填充就可以完成。
因此按照上述的拆解原则，下面我们要做的事情是：
- 找行列
- 找填充
行列
从效果图可以看出，只有屏幕居中有一行。
先找到最底层的行
这一行中有三列：
再找到列
这三列将此行进行了均分。
对其中的一列进行拆解：这是一个包含两行元素的列：
最后拆元素
对行列拆解完以后，可以得出如下结论：
- 在屏幕中央位置有一行
- 此行包含三列
- 每列有两行
- 第一行是ICON，第二行是TEXT。
这样，我们就完成了布局拆解工作。 剩下的就是按照自下而上的方式组织元素。
实现
封装重复元素
从上面，可以看出由Icon和Text组成的元素重复了多次。 因此很自然的就想先封装重复元素
封装元素
mainAxisSize设定为尽可能小的占用水平空间，
但因为这两个元素水平宽度不大，因此mainAxisSize的设置可能效果不会太明显。但作为一种良好的布局编码规范，最好加上。
在Icon和Text直接需要一些间隔，因此使用EdgeInsets在top方向添加10.0的间距。
构建布局
元素封装好以后，就可以按照自下而上的顺序开始构建布局了。
- 构建最底层
最底层是在屏幕中央位置添加一行，先加上这行:
构建最底层
然后在这行中添加三列，并且要求均分此行。
三列均分
最后添加图标元素，如下：
添加图标
至此就完成了一个最基本的Flutter布局。
分享到:
閱讀更多 弓長86說 的文章
