Flutter之Flex组件布局

在Flutter中，Flex组件是一种非常常见的布局组件，它是Row和Column的扩展，可以通过flex参数来控制子widget的空间。

以下是一些使用Flex布局的示例：

1. 基本的Flex使用：

Flex(
  direction: Axis.horizontal, // 水平方向
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
)

在这个例子中，我们创建了一个水平方向的Flex。第一个子widget占据屏幕宽度的1/3，第二个子widget占据屏幕宽度的2/3。

2. 使用Flex的mainAxisAlignment和crossAxisAlignment属性：

Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 子widget在主轴方向上均匀分布
  crossAxisAlignment: CrossAxisAlignment.center, // 子widget在交叉轴方向上居中
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  ],
)

在这个例子中，我们创建了一个水平方向的Flex，并设置了主轴方向（水平）和交叉轴方向（垂直）的对齐方式。

3. 使用Flex的mainAxisSize属性：

Flex(
  direction: Axis.horizontal,
  mainAxisSize: MainAxisSize.min, // 主轴方向占用最小空间
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
  ],
)

在这个例子中，我们创建了一个水平方向的Flex，并设置了主轴方向（水平）的空间大小。

以上就是一些使用Flex布局的基本示例，Flex布局在Flutter中非常常见，也非常强大，可以根据需要灵活使用。