Flutter 簡單佈局技巧

前言

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

歡迎關注我的Gthub和CSDN.

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

總結

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

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

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

細節

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

IntrinsicHeight/IntrinsicWidth可以讓Row/Column內的自view保持同一高度/寬度, 例:

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

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

Material(
  clipBehavior: Clip.antiAlias, // 必須加, 否則圓角不生效
  borderRadius: BorderRadius.circular(5.0),
  child: ...
)

Container(
  decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(5.0)),
  child: ...
)
複製程式碼

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

Flutter 簡單佈局技巧

前言

總結

細節

相關文章