Flutter Flex（Row Column，Expanded, Stack） 组件
前言
这个Flex 继承自 MultiChildRenderObjectWidget，所以是多子布局组件
class Flex extends MultiChildRenderObjectWidget {}
Flex 的子组件就是Row 和 Column , 之间的区别就是Flex 的 direction 设置不同。
它有两个轴，一个是MainAxis 还有一个是交叉轴 CrossAxis
一 Row
横向布局组件，主轴是横向 主要属性。
1 Row的特点
水平方向尽可能的占据比较大的空间,如果需要设置水平防线也需要包裹内容 MainAxisSize.min
垂直方向包裹内容,就是以子组件最大的高度去布局。
2 MainAxisAlignment 这个枚举类型的属性 默认是start
| start | 从主轴开始位置摆放元素 |
| end | 从主轴结束位置摆放元素 |
| center | 主轴中心点对齐 |
|
spaceAround |
左右两边的间距是中间间距的一半 |
|
spaceBetween |
左右两边间距为0 ，中间间距平分 |
|
spaceEvenly |
所有的间距平分 |
3 CrossAxisAlignment 这个枚举类也有属性 默认是center
| start | 从交叉轴开始位置摆放元素 |
| center | 主轴中心点对齐 |
|
end |
交叉轴结束位置对齐 |
|
baseline |
基线对齐，必须有文本的时候才能起效果 |
|
stretch |
先让交叉轴占据更大的空间，将所有的子Widget交叉轴的高度拉伸到最大 |
_demo1() {return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Container(color: Colors.cyan,width: 70,height: 150,),Container(color: Colors.orange,width: 120,height: 100,),Container(color: Colors.blueAccent,width: 90,height: 80,)],);}
二 Column 组件
和Row 组件差不多，只不是方向不一样。
三 Expanded 组件
这个组件主要是一个弹性的布局。 属性弹性布局 主要是继承自 Flexible这个组件，
Flexible是继承自ParentDataWidget，ParentDataWidget继承自 ProxyWidget
ProxyWidget 作为一个抽象的代理 Widget 并没有实质性的作用，只是在父类和子类需要传递信息时使用；主要有 InheritedWidget 和 ParentDataWidget两类。
flex 属性决定了包裹组件的宽度的，默认是1
比如以下的代码
_demo3() {return Row(children: [Container(width: 100,height: 80,color: Colors.cyan,),Container(width: 180,height: 80,color: Colors.orangeAccent,),Container(width: 280,height: 80,color: Colors.redAccent,)],);}宽度超出了屏幕的宽度，则会产生溢出
如果让后面的Container 宽度固定(后面两个Container的宽度不要超过屏幕宽度)，给第一个包裹一个Expanded 组件就可以解决这个问题。因为他是弹性收缩的。
被Expanded包裹的组件设置宽度就无效了。
_demo3() {return Row(children: [Expanded(child: Container(width: 100,height: 80,color: Colors.cyan,),),Container(width: 100,height: 80,color: Colors.orangeAccent,),Container(width: 160,height: 80,color: Colors.redAccent,)],);}
下面设置三个container 宽度为3:2:1 ，则其宽度不用设置即可
_demo3() {return Row(children: [Expanded(flex: 3,child: Container(height: 80,color: Colors.cyan,),),Expanded(flex: 2,child: Container(height: 80,color: Colors.orangeAccent,),),Expanded(flex: 1,child: Container(height: 80,color: Colors.redAccent,))],);}
四 Stack 组件
| 属性 | 说明 |
|---|---|
| alignment | 配置所有子元素的显示位置 |
| children | 子组件 |
class Stack extends MultiChildRenderObjectWidget
层叠组件，这个组件是把组件可以叠起来放的。也是一个多子组件。
一般来讲，配合Positioned 组件使用。
_demo4() {return Stack(alignment: AlignmentDirectional.center,children: [Image.network("https://picsum.photos/200/300?random=1"),Positioned(left: 0,right: 0,bottom: 0,child: Container(color: Colors.cyan,child: Text("这是一张图片",style: TextStyle(color: Colors.redAccent, fontSize: 25),textAlign: TextAlign.center,),))],);}
