Flutter 布局方式之弹性布局

作者: 小王在努力 | 来源:发表于2020-12-03 11:57 被阅读0次

前言

目前Flutter常见的布局方式主要有4种：1、线性布局 2、流式布局 3、弹性布局 4、层叠布局

今天我们主要介绍弹性布局

线性布局

流式布局

层叠布局

弹性布局

弹性布局允许子组件按照一定比例来分配父视图空间。
H5中的弹性盒子布局，Android中的FlexboxLayout等。
关键字Flex、Expanded

代码实现

    return Scaffold(
        appBar: AppBaseBar("弹性布局"),
        body: Flex(
            direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 100,
                    color: Colors.yellow,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100,
                    color: Colors.blue,
                  ),
                ),
              ],
          ),
    );