Flutter 簡單佈局技巧

前言

年後一直在做Flutter開發, 到現在進行了一個多月了, 趁著專案暫時告一段落總結一下佈局的小技巧.

歡迎關注我的Gthub和CSDN.

ps. 想把CSDN的部落格都搬到掘金, 有什麼簡單的辦法麼?

總結

Flutter中控制元件居多, 但是經常使用的也就以下這麼幾個, 掌握這些基本可以完成80%的佈局了:

1. View類: Text, Image, TextField, MaterialButton, Icon/IconButton;
2. ViewGroup: Row, Column, Stack;
3. 佈局定位相關: Container, Padding, Align, Flexible, Expanded, Offstage;

其中Row/Column可以理解為android內的LinearLayout, 無論多複雜的介面基本都可以切分為n個Row/Column的組合.

細節

1. Row/Column中的mainAxisSize: MainAxisSize.min可以令Row/Column的寬度/長度最小化, 無空隙地包在子view上, 即類似於android中wrap_content的效果;
2. Row/Column可以理解為android內的LinearLayout, 其內部的子view可以包一層Flexible實現類似於weight的比例劃分效果;
3. 讓Container填充整個父佈局, 實現match_parent效果, 可以設定其寬高為width: double.infinity (內部是 1.0/0.0, 神不神奇 );
4. IntrinsicHeight/IntrinsicWidth可以讓Row/Column內的自view保持同一高度/寬度, 例:

   IntrinsicHeight(
     // 這裡的A/B為同一高度, 假設A高為20, B原高為10, 這裡B會把高度撐起, 也會變為20
     child: Row(children: <Widget>[A, B]),
   )
   複製程式碼

5. 實現控制元件的圓角可以使用Material, 實現背景的圓角可以使用Container, 例:

   Material(
     clipBehavior: Clip.antiAlias, // 必須加, 否則圓角不生效
     borderRadius: BorderRadius.circular(5.0),
     child: ...
   )
   
   Container(
     decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(5.0)),
     child: ...
   )
   複製程式碼

6. GestureDetector預設不響應空白位置的點選, 需要新增behavior: HitTestBehavior.translucent;
7. 未完待續...