Flutter 简单布局技巧

今天药忘吃喽~ 2022-01-20 05:21 328阅读 0赞

## 前言 ##

年后一直在做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.  未完待续...

[Gthub]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FYouCii
[CSDN]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fj550341130