Flutter必备-Flex布局完全解读

前言

Flex布局是Flutter的五虎上将之一,虎父无犬子，其子Row和Column也能力非凡
你有没有被mainAxisAlignment，crossAxisAlignment弄得晕头转向,本文将助你将他们纳入麾下。
先看一下父子三人在Flutter布局体系中的位置:多子组件布局

1.Flex的属性一览

2.轴向:direction:Axis

enum Axis {
  horizontal,//水平
  vertical,//竖直
}

也就是水平排放还是竖直排放，可以看出默认情况下都是主轴顶头,交叉轴居中
比如horizontal下主轴为水平轴，交叉轴则为竖直。也就是水平顶头，竖直居中
这里使用MultiShower快速展示,更好的对比出不同之处.

var direction =[Axis.horizontal,Axis.vertical];
var show = MultiShower(direction,(e){
  return Flex(
    direction: e,
    children: <Widget>[redBox,blueBox,yellowBox,greenBox],

  );
},color: Colors.black12,width: 300,height: 200);

var redBox= Container(
  color: Colors.red,
  height: 50,
  width: 50,
);

var blueBox= Container(
  color: Colors.blue,
  height: 30,
  width: 60,
);

var yellowBox= Container(
  color: Colors.yellow,
  height: 50,
  width: 100,
);

var greenBox= Container(
  color: Colors.green,
  height: 60,
  width: 60,
);

3.主轴方向:mainAxisAlignment:MainAxisAlignment

主轴方向的排布规则,这里以水平为例，主轴为水平方向。竖直类比即可

enum MainAxisAlignment {
  start,//顶头
  end,//接尾
  center,//居中
  spaceB