Flutter速来系列12：弹性布局Flex，谈谈谈，谈上了Expanded组件

在Flutter中，Flex布局是一种非常强大的布局方式，它可以用来实现各种复杂的布局。Flex布局的基础是Flex组件，Flex组件可以根据其父组件的大小和子组件的数量自动调整其大小。Flex组件还可以指定子组件的排列方式，例如水平排列、垂直排列或交错排列。

Expanded组件是Flex组件的一个子组件，它可以使子组件占据父组件的剩余空间。Expanded组件非常有用，因为它可以使子组件自动调整其大小，以适应父组件的大小变化。

在Flutter中，可以使用Flex组件和Expanded组件来实现各种复杂的布局。Flex布局非常灵活，可以满足各种不同的布局需求。

以下是一些使用Flex布局和Expanded组件的示例：

• 水平排列的三个子组件：

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

• 垂直排列的三个子组件：

Column(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

• 交错排列的三个子组件：

Wrap(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
);

Flex布局是一种非常强大的布局方式，它可以用来实现各种复杂的布局。Flex布局非常灵活，可以满足各种不同的布局需求。