前言
年后一直在做Flutter开发, 到现在进行了一个多月了, 趁着项目暂时告一段落总结一下布局的小技巧.
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
;- 未完待续...