Flutter 简单布局技巧年后一直在做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;
未完待续...