Flutter 簡單佈局技巧

摘要： 年後一直在做Flutter開發, 到現在進行了一個多月了, 趁著專案暫時告一段落總結一下佈局的小技巧. 歡迎關注我的Gthub 和CSDN . ps. 想把CSDN的部落格都搬到掘金, 有什麼簡單的辦法麼? 總結 Flutter中控制元件居多, 但是經常使...

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

歡迎關注我的Gthub 和CSDN .

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

總結

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

Text, Image, TextField, MaterialButton, Icon/IconButton
Row, Column, Stack
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. 未完待續...