Flutter Spacer widget 的使用详解

12 min read

Flutter Spacer widget 是一个用于在布局中插入空白空间的 widget，它可以用来控制子 widget 之间的距离。

使用 Spacer widget 可以非常方便的帮助我们实现一个灵活的布局，它可以自动填充非特定长度的空间，并在子 widget 之间分配额外的空间。

Spacer widget 的主要属性：

  • flex：此属性决定了它占用可用空间的比例。与 Flex widget 中的 Flexfit 属性类似，Spacer 的 flex 属性可以设置为 FlexFit.tight 或 Flexfit.loose，其中 tight 表示尽可能填充可用空间，loose 表示尽可能少地填充可用空间。
  • key：这是一个可选的键，用于帮助 Flutter 识别 widget。
  • 父 widget 中的其他属性可以影响 Spacer widget。

使用 Spacer widget 的示例代码：

Column(
  children: [
    Container(
      height: 50,
      color: Colors.blueGrey,
    ),
    Spacer(
      flex: 1,
    ),
    Container(
      height: 50,
      color: Colors.deepPurple,
    ),
    Spacer(
      flex: 2,
    ),
    Container(
      height: 50,
      color: Colors.amber,
    ),
  ],
)

在上面的代码中，我们创建了一个 Column widget，并使用 Spacer widget 在每个 Container widget 之间插入空白空间，这样就可以在布局中实现我们想要的间距效果。

注意：我们设置了 Spacer widget 的 flex 属性来调整它们在布局中的比例大小。在上面的示例中，我们将第二个 Spacer 的 flex 设置为 2，这意味着它会占用可用空间的两倍，而第一个 Spacer 的 flex 设置为 1，它会占用可用空间的一倍。