Flutter 简单布局技巧

2,360 阅读1分钟

前言

年后一直在做Flutter开发, 到现在进行了一个多月了, 趁着项目暂时告一段落总结一下布局的小技巧.

欢迎关注我的GthubCSDN.

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. 未完待续...