Flutter 中 Flexible、Expanded、Spacer 的使用技巧详解 _ Flutter Widgets

在Flutter中，Flexible、Expanded和Spacer是布局中常用的三个widget，以下是它们的简单介绍和使用示例：

1. Flexible：用于在Row、Column或Flex中使用，允许子widget按比例伸缩。

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

2. Expanded：用于在Row、Column或Flex中使用，允许子widget占用剩余空间。

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

3. Spacer：在Row或Column中使用，可以自动填充空白空间。

Row(
  children: <Widget>[
    Container(color: Colors.red),
    Spacer(), // 填充空白空间
    Container(color: Colors.blue),
  ],
)

以上代码展示了如何在不同的布局widget中使用Flexible、Expanded和Spacer，以达到不同的布局效果。