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,),))],);}