Flutter 中如何使用 Expanded 和 Flexible？

推荐答案

在 Flutter 中，Expanded 和 Flexible 是用于控制子组件在 Row、Column 或 Flex 等布局中的尺寸和位置的组件。它们的主要区别在于 Expanded 强制子组件填充剩余空间，而 Flexible 则允许子组件根据 flex 属性灵活调整大小。

使用 Expanded

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Expanded(
      child: Container(
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
)

在这个例子中，Expanded 使得蓝色容器填充了 Row 中剩余的所有空间。

使用 Flexible

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(
        height: 50,
        color: Colors.green,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        height: 50,
        color: Colors.yellow,
      ),
    ),
  ],
)

在这个例子中，Flexible 允许绿色和黄色容器根据 flex 属性的比例分配空间。绿色容器占据 1/3 的空间，黄色容器占据 2/3 的空间。

本题详细解读

Expanded 和 Flexible 的区别

• Expanded: 是 Flexible 的一个特例，flex 属性默认为 1，并且 fit 属性默认为 FlexFit.tight，这意味着子组件必须填充剩余空间。
• Flexible: 提供了更多的灵活性，可以通过 flex 属性设置子组件的比例，并且 fit 属性可以设置为 FlexFit.loose，允许子组件不强制填充剩余空间。

使用场景

• Expanded: 当你希望子组件占据所有剩余空间时使用。
• Flexible: 当你需要更灵活的空间分配时使用，例如根据比例分配空间或允许子组件不强制填充剩余空间。

注意事项

• 使用 Expanded 或 Flexible 时，确保父组件是 Row、Column 或 Flex 等支持 Flex 布局的组件。
• Expanded 和 Flexible 只能用于 Flex 布局的直接子组件。