flutter flex布局

Flutter中的Flex布局是一种弹性布局模型，它可以让子元素按照一定的比例分配父容器的可用空间。Flex布局主要包含三个组件：Flex、Flexible和Expanded。

1. Flex

Flex是一个容器组件，它可以将子组件按照一定的比例排列。Flex有两个属性：direction和mainAxisAlignment，其中direction表示子组件排列的方向，默认为水平方向，mainAxisAlignment表示子组件在主轴上的对齐方式。

2. Flexible

Flexible是一个伸缩组件，它可以根据父容器的可用空间来调整自身的尺寸。Flexible有三个属性：flex、fit和child，其中flex表示子组件的比例，fit表示子组件在可用空间不足时的适应方式，child表示子组件。

3. Expanded

Expanded是Flexible的一种特殊情况，它的flex属性默认为1。使用Expanded可以让子组件占据父容器剩余的所有空间。

下面是一个简单的Flex布局示例：

Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Flexible(
      flex: 1,
      fit: FlexFit.tight,
      child: Container(
        height: 50,
        color: Colors.red,
      ),
    ),
    Flexible(
      flex: 2,
      fit: FlexFit.loose,
      child: Container(
        height: 50,
        color: Colors.blue,
      ),
    ),
    Expanded(
      child: Container(
        height: 50,
        color: Colors.green,
      ),
    ),
  ],
)

在这个示例中，我们创建了一个水平方向的Flex容器，其中有三个子组件。第一个子组件使用了Flexible，它的flex属性为1，表示占据1/3的空间；第二个子组件也使用了Flexible，它的flex属性为2，表示占据2/3的空间；第三个子组件使用了Expanded，它会占据剩余的所有空间。在这个示例中，第一个子组件使用了tight适应方式，它会尽可能地占据可用空间；第二个子组件使用了loose适应方式，它会根据自身的尺寸来调整大小。