Flutter 中如何使用 SizedBox 和 Spacer？

推荐答案

在 Flutter 中，SizedBox 和 Spacer 都是用于控制布局的常用组件，但它们的使用场景和功能有所不同。

使用 SizedBox

SizedBox 是一个具有固定大小的盒子，通常用于在布局中创建空白区域或限制子组件的大小。

SizedBox(
  width: 100.0,
  height: 50.0,
  child: Text('Hello, World!'),
);

• width 和 height：可以设置 SizedBox 的宽度和高度。如果只设置其中一个，另一个维度将根据子组件的大小自动调整。
• child：SizedBox 可以包含一个子组件，子组件的大小将被限制在 SizedBox 的尺寸范围内。

使用 Spacer

Spacer 是一个灵活的空白空间，通常用于在 Row 或 Column 中分配剩余空间。

Row(
  children: <Widget>[
    Text('Start'),
    Spacer(), // 占据剩余空间
    Text('End'),
  ],
);

• flex：Spacer 可以通过 flex 属性来控制它在剩余空间中的占比。默认值为 1。

// www.javascriptcn.com code example
Row(
  children: <Widget>[
    Text('Start'),
    Spacer(flex: 2), // 占据两倍的剩余空间
    Text('Middle'),
    Spacer(flex: 1), // 占据一倍的剩余空间
    Text('End'),
  ],
);

本题详细解读

SizedBox 的详细解读

SizedBox 是一个简单的布局组件，主要用于以下场景：

1. 创建固定大小的空白区域：当需要在两个组件之间添加固定大小的空白时，可以使用 SizedBox。

   Column(
     children: <Widget>[
       Text('Top'),
       SizedBox(height: 20.0), // 添加 20px 的垂直空白
       Text('Bottom'),
     ],
   );

2. 限制子组件的大小：当需要限制子组件的大小而不改变其布局行为时，可以使用 SizedBox。

   SizedBox(
     width: 200.0,
     height: 100.0,
     child: ElevatedButton(
       onPressed: () {},
       child: Text('Click Me'),
     ),
   );

Spacer 的详细解读

Spacer 是一个灵活的布局组件，主要用于在 Row 或 Column 中分配剩余空间。它的工作原理类似于 Expanded，但它不包含子组件。

1. 分配剩余空间：Spacer 会自动占据父组件中的剩余空间，使得其他组件能够按照预期排列。

   Row(
     children: <Widget>[
       Text('Left'),
       Spacer(), // 占据剩余空间
       Text('Right'),
     ],
   );

2. 控制空间占比：通过 flex 属性，可以控制 Spacer 在剩余空间中的占比。

   // www.javascriptcn.com code example
   Row(
     children: <Widget>[
       Text('Left'),
       Spacer(flex: 2), // 占据两倍的剩余空间
       Text('Middle'),
       Spacer(flex: 1), // 占据一倍的剩余空间
       Text('Right'),
     ],
   );

总结

• SizedBox 用于创建固定大小的空白区域或限制子组件的大小。
• Spacer 用于在 Row 或 Column 中分配剩余空间，并且可以通过 flex 属性控制空间占比。

通过合理使用 SizedBox 和 Spacer，可以更灵活地控制 Flutter 应用的布局。