Flutter快速上手4：基础布局之弹性布局Flex

弹性布局，类似于 CSS 的 Flexbox。

属性名	类型	简介
direction	Axis	主轴的方向
mainAxisAlignment	MainAxisAlignment	子Widget 在主轴的对齐方式
mainAxisSize	MainAxisSize	主轴应该占用多大的空间
crossAxisAlignment	CrossAxisAlignment	子Widget 在交叉轴的对齐方式
textDirection	TextDirection	子Widget 在主轴方向上的布局顺序
verticalDirection	VerticalDirection	子Widget 在交叉轴方向上的布局顺序
textBaseline	TextBaseline	子Widget 时使用哪个基线
children	List< Widget>	Flex布局里排列的子控件

direction 的取值：主轴的方向

Axis 值	简述
Axis.horizontal	主轴为水平方向，子Widget 就会沿水平方向排列，则交叉轴为垂直方向。
Axis.vertical	主轴为垂直方向，子Widget 就会沿垂直方向排列，则交叉轴为水平方向。

mainAxisAlignment 的取值：子控件在主轴的对齐方式

MainAxisAlignment 值	简述
MainAxisAlignment.start	沿着主轴的起点对齐，textDirection 必须有值，以确定是从左边开始的还是从右边开始的
MainAxisAlignment.end	沿着主轴的终点对齐，textDirection 必须有值，以确定是在左边结束的还是在右边结束的
MainAxisAlignment.center	在主轴上居中对齐
MainAxisAlignment.spaceBetween	在主轴上，两端对齐，子控件之间的间隔都相等
MainAxisAlignment.spaceAround	在主轴上，将多余的控件均匀分布给 子控件之间，而且第一个 子Widget 和 最后一个子Widget 距边框的距离是 两个 子Widget 距离的一半
MainAxisAlignment.spaceEvenly	在主轴上，将多余的控件均匀分布给子控件之间，而且第一个 子Widget 和 最后一个子Widget 距边框的距离和 子控件之间的距离一样

其中最后三个属性不太好理解，这里给出图示：

MainAxisAlignment.spaceBetween

两端顶格，中间均分

MainAxisAlignment.spaceAround

该效果我称为拉手布局，相当于小朋友伸开手，且相互间手拉手。

MainAxisAlignment.spaceEvenly

均分间距

mainAxisSize 的取值 : 表示主轴应该占用多大的空间

MainAxisSize 值	简述
MainAxisSize.min	主轴的大小是能显示完 子Widget 的最小大小，主轴的大小就是 子Widget 的大小
MainAxisSize.max	主轴能显示的最大的大小，根据约束来判断

crossAxisAlignment 的取值：子控件在交叉轴的对齐方式

CrossAxisAlignment 值	简述
CrossAxisAlignment.start	沿着交叉轴的起点对齐，verticalDirection 必须有值，以确定是从左边开始的还是从右边开始的
CrossAxisAlignment.end	沿着主轴的终点对齐，verticalDirection 必须有值，以确定是在左边结束的还是在右边结束的
CrossAxisAlignment.center	在交叉轴上居中对齐
CrossAxisAlignment.stretch	要求 子Widget 在交叉轴上填满
CrossAxisAlignment.baseline	要求 子Widget 的基线在交叉轴上对齐

textDirection 的取值：子控件在主轴方向上的布局顺序

TextDirection 值	简述
TextDirection.rtl	表示从右到左
TextDirection.ltr	表示从左到右

verticalDirection 的取值 ：子控件在交叉轴方向上的布局顺序

VerticalDirection 值	简述
VerticalDirection.up	表示从下到上
VerticalDirection.down	表示从上到下

  final _colorArr = [
    Colors.red,
    Colors.purple,
    Colors.pink,
    Colors.greenAccent,
    Colors.orangeAccent,
    Colors.grey,
  ];

Center(
          child: Container(
            margin: const EdgeInsets.only( top: 50),
            color: Colors.pink.shade50,
            // alignment: Alignment.center,
              height: 300,
            width: 300,
            child: Flex(
                direction: Axis.vertical,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Container(
                    height: 50,
                    width: 50,
                    color: _colorArr[0],
                  ),
                  Container(
                    height: 40,
                    width: 60,
                    color: _colorArr[1],
                  ),
                  Container(
                    height: 100,
                    width: 80,
                    color: _colorArr[2],
                  ),
                  Container(
                    height: 30,
                    width: 100,
                    color: _colorArr[3],
                  ),

                ]),
          ),
        )

用这些色块，可以自己玩一下，很有意思哦

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~