Flutter 布局方式之层叠布局

前言

目前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
一个复杂布局可能是由多种布局的组合而成