文章已同步至掘金：https://juejin.cn/post/6844903956469153799
欢迎访问😃，有任何问题都可留言评论哦~

Flutter中的Flex和Expanded也是比较重要的，他们两个可以搭配起来使用

Flex 被称为弹性布局，这个在H5中也存在这个概念，H5中也有Flex布局。

所谓的弹性布局，就是允许子组件按照一定的比例来分配父容器的控件，他会自适应屏幕的宽度和高度，不是一个固定的数值。

Flex

Flex 组件可以沿着水平或垂直方向排列子组件。

如果知道主轴方向的话，可以使用Row或Column会方便一些，
因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。

Flex最重要的一点，就是可以和Expanded组件配合使用，来实现弹性布局

源码示例

构造函数如下：

注：其中带@required，意思是必须要使用这个属性

Flex({
	Key key,
	@required this.direction,
	this.mainAxisAlignment = MainAxisAlignment.start,
	this.mainAxisSize = MainAxisSize.max,
	this.crossAxisAlignment = CrossAxisAlignment.center,
	this.textDirection,
	this.verticalDirection = VerticalDirection.down,
	this.textBaseline,
	List<Widget> children = const <Widget>[],
})

属性解释

其中Flex几乎所有属性都和Row与Column一样，
所以有关属性怎么使用，可以参考我的文章：Flutter 布局控件篇–>Row、Column

这里只说下direction

direction

决定弹性布局的方向
Row默认为水平方向，Column默认为垂直方向，其本质和Row和Column组件一样

如下：
direction: Axis.horizontal意思主轴是水平方向
direction: Axis.vertical意思主轴是垂直方向

Expanded

Expanded用法就比较简单了
他可以按比例伸缩或扩展 Row、Column和Flex子组件所占用的空间大小。

源码示例

构造函数如下：

const Expanded({
	Key key,
	int flex = 1,
	@required Widget child,
}) 

属性解释

key

就是一个唯一标识符

flex

弹性系数
如果为 0 或 null，则 child 是没有弹性的，即不会被扩伸占用的空间。
如果大于 0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。

代码示例：

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的两个子widget按1：2来占据水平空间  
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100.0,
            //Flex的三个子widget，在垂直方向按2：1：1来占用100像素的空间  
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
                Spacer(
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

运行效果：

示例中的Spacer的功能是占用指定比例的空间，实际上它只是Expanded的一个包装类

其中Expanded也是可以和Row和Column结合来使用的

---

Y_Y