前言
目前Flutter常见的布局方式主要有4种：1、线性布局 2、流式布局 3、弹性布局 4、层叠布局
今天我们主要介绍层叠布局
线性布局
流式布局
弹性布局
层叠布局
层叠布局也叫帧布局
子视图可以根据距父视图四个角的位置来确定自身的位置
层叠布局和Web中的绝对定位、Android中的FrameLayout是相似的
关键字Stack、Positioned
代码实现
return Scaffold(
appBar: AppBaseBar("层叠布局"),
body: Stack(
children: [
Positioned(
left: 20,
top: 20,
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
Positioned(
right: 20,
top: 20,
child: Container(
height: 100,
width: 100,
color: Colors.yellow,
),
),
],
),
);
层叠布局根据4个角的来固定位置，根据宽高来固定大小
总结
Flutter的布局一切都是widget,布局过程就是widget的组合
Flutter布局中需要清楚的划分Row Column Stack ListView GridView
一个复杂布局可能是由多种布局的组合而成
