Flutter 必备：Flex 布局完全解读

本文字数： 4894 字

预计阅读时间： 30分钟

Flutter作为一个跨平台的框架，最能展现它实力的当属界面了，一套界面可以同时运用在多个终端，这是一件非常令人兴奋的事。进入Flutter的世界，你的第一道拦路虎当属布局了，庞大的组件家族让你望而却步，但将他们进行梳理之后你就会发现，这是非常友善的。你可以在需要的时候使用相应的单体组件，需要排布的时候也会有众多的布局组件为你做后盾。

Flutter中的Flex布局作为五虎上将之一，当然虎父无犬子，其子Row和Column也能力非凡，使用时你有没有被mainAxisAlignment、crossAxisAlignment弄得晕头转向？本文将助你把他们纳入麾下，成为你布局战场上的猛将而非敌人。

我们先看一下父子三人在Flutter布局体系中的位置： 多子组件布局 。

Flex家族包括Flex组件、Row组件、Column组件，位于widgets包中的basic文件中。

 1---->[flutter/lib/src/widgets/basic.dart:3677]----
 2class Flex extends MultiChildRenderObjectWidget {
 3    Flex({
 4        Key key,
 5        @required this.direction,
 6        this.mainAxisAlignment = MainAxisAlignment.start,
 7        this.mainAxisSize = MainAxisSize.max,
 8        this.crossAxisAlignment = CrossAxisAlignment.center,
 9        this.textDirection,
10        this.verticalDirection = VerticalDirection.down,
11        this.textBaseline,
12        List children = const [],
13      }) : assert(direction != null),
14
15---->[flutter/lib/src/widgets/basic.dart:4015]----
16class Row extends Flex {
17
18---->[flutter/lib/src/widgets/basic.dart:4213]----
19class Column extends Flex {

03

轴向: direction:Axis

1enum Axis {
2  horizontal,//水平
3  vertical,//竖直
4}

 1var direction =[Axis.horizontal,Axis.vertical];
 2var show = MultiShower(direction,(e){
 3  return Flex(
 4    direction: e,
 5    children: [redBox,blueBox,yellowBox,greenBox],
 6
 7  );
 8},color: Colors.black12,width: 300,height: 200);
 9
10var redBox= Container(
11  color: Colors.red,
12  height: 50,
13  width: 50,
14);
15
16var blueBox= Container(
17  color: Colors.blue,
18  height: 30,
19  width: 60,
20);
21
22var yellowBox= Container(
23  color: Colors.yellow,
24  height: 50,
25  width: 100,
26);
27
28var greenBox= Container(
29  color: Colors.green,
30  height: 60,
31  width: 60,
32);

1enum MainAxisAlignment {
2  start,//顶头
3  end,//接尾
4  center,//居中
5  spaceBetween,//顶头接尾，其他均分
6  spaceAround,//中间的孩子均分,两头的孩子空一半
7  spaceEvenly,//均匀平分