Flutter开发之——多组件布局容器-权重组件(Flexible，2024金九银十

在Flutter中，Flexible是一个简单的组件，它允许子组件根据父容器中可用空间进行伸缩。Flexible通常与Row、Column或Flex等布局容器配合使用。

Flexible组件有两个主要参数：

1. flex：一个整数，指定了子组件相对于其他子组件的伸缩系数。
2. fit：一个枚举值，指定如何调整子组件的大小以适应其父容器的空间。

fit参数可以有以下两个值：

• FlexFit.tight：子组件的大小会根据flex值进行伸缩。
• FlexFit.loose：子组件的大小会被设置为子组件的最大尺寸，不会伸缩，除非父容器空间不足。

下面是一个使用Flexible的例子，其中有两个Flexible子组件，它们在Row中均匀分布：

Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.blue),
    ),
  ],
)

在这个例子中，两个Flexible子组件都被赋予了flex值为1，这意味着它们会平均分配父容器的空间。如果有一个子组件的flex值为2，那么它会占据的空间是另一个子组件的两倍：

Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 2,
      child: Container(color: Colors.blue),
    ),
  ],
)

在这个例子中，蓝色的Flexible子组件将占据的空间是红色的子组件的两倍。