本篇描述的是基礎佈局，先放上一個效果圖:
最終效果圖
在屏幕中央位置居中放上三個自定義圖標。
在構建基礎佈局時，經常使用的拆解方法是洋蔥法，自低向上一層一層拆解UI元素。
層次拆解
拆解原則
- 找行、列
- 找網格
- 找重疊元素
- 找選項卡
- 找需要對齊、填充和邊框的區域
拆解過程
這個UI佈局比較簡單，一眼就可以看出：不需要網格，沒有重疊的元素然後也沒有選項卡。只需要行和列，適當的填充就可以完成。
因此按照上述的拆解原則，下面我們要做的事情是：
- 找行列
- 找填充
行列
從效果圖可以看出，只有屏幕居中有一行。
先找到最底層的行
這一行中有三列：
再找到列
這三列將此行進行了均分。
對其中的一列進行拆解：這是一個包含兩行元素的列：
最後拆元素
對行列拆解完以後，可以得出如下結論：
- 在屏幕中央位置有一行
- 此行包含三列
- 每列有兩行
- 第一行是ICON，第二行是TEXT。
這樣，我們就完成了佈局拆解工作。 剩下的就是按照自下而上的方式組織元素。
實現
封裝重複元素
從上面，可以看出由Icon和Text組成的元素重複了多次。 因此很自然的就想先封裝重複元素
封裝元素
mainAxisSize設定為儘可能小的佔用水平空間，
但因為這兩個元素水平寬度不大，因此mainAxisSize的設置可能效果不會太明顯。但作為一種良好的佈局編碼規範，最好加上。
在Icon和Text直接需要一些間隔，因此使用EdgeInsets在top方向添加10.0的間距。
構建佈局
元素封裝好以後，就可以按照自下而上的順序開始構建佈局了。
- 構建最底層
最底層是在屏幕中央位置添加一行，先加上這行:
構建最底層
然後在這行中添加三列，並且要求均分此行。
三列均分
最後添加圖標元素，如下：
添加圖標
至此就完成了一個最基本的Flutter佈局。
分享到:
閱讀更多 弓長86說 的文章
