前言
这篇文章开始主要记录一些常用的组件和组件属性
本篇文章主要着重记录一些常用布局
正文
约束布局ConstrainedBox
ConstrainedBox可以理解为一个带有大小属性的盒子，如果类比android的话，可以认为是一个带有宽高的ViewGroup
用法如下
ConstrainedBox(
constraints:BoxConstraints(minHeight: 50, minWidth: double.infinity),
child:...,
)
需要注意约束关系，已经通过代码执行结果如下图
约束关系
横向布局Row
Row可以理解为设置orientation为horizontal的LinearLayout
用法如下
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: ...,
)
可以通过mainAxisSize，mainAxisAlignment，verticalDirection设置布局间隔
如下图
布局间隔
纵向布局Column
和Row一样，是纵向布局
这里不多赘述
弹性布局Flex
可以理解为android中的权重，通常配合Expanded使用，用法如下
Flex(
direction: Axis.horizontal,
children: [
Expanded(
flex: 1,
child: Container(
child: Text("占比1"),
color: Colors.blue,
),
),
Expanded(
flex: 2,
child: Container(
child: Text("占比2"),
color: Colors.red,
),
)
],
),
通过flex设置权重占比，通过direction设置横向纵向
执行结果如下图
执行结果
流布局Wrap
当一行或一列显示不下时可以换行的布局
用法如下
Wrap(
spacing: 10,
runSpacing: 5,
runAlignment: WrapAlignment.center,
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.start,
direction: Axis.horizontal,
children: child,
)
可以控制间距，对齐等属性，也可以控制横向纵向排版
结果
层叠布局
就是android里的帧布局，代码入下
Stack(
alignment: Alignment.centerLeft,
children:[])
效果如下
效果
以上就是布局相关的常用组件
