Flutter 组件深浅谈：SizeBox 与 FittedBox

在 Flutter 中，SizeBox 和 FittedBox 是两个十分有用的组件，用于控制子组件的大小和布局。本文将深入浅出地介绍这两个组件的用法和区别。

SizeBox

SizeBox 组件创建一个指定大小的盒子，用于限制子组件的大小。它强制子组件具有特定的宽度和高度，无论其固有大小如何。

用法

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

上面的代码创建一个宽度为 100.0、高度为 50.0 的盒子，里面包含一个文本组件。即使文本组件的固有大小小于盒子的大小，它也会被限制在盒子里。

FittedBox

FittedBox 组件也用于控制子组件的大小，但它以不同的方式运作。FittedBox 将子组件调整为适合其自身大小，同时保持子组件的宽高比。

用法

FittedBox(
  fit: BoxFit.contain,
  child: Image.network('https://example.com/image.jpg'),
)

上面的代码创建一个 FittedBox，将子图像调整为适合其大小，同时保持图像的宽高比。图像将缩小或放大以适应 FittedBox 的大小。

BoxFit

FittedBox 有几个可选的 fit 值，指定子组件如何调整以适合盒子：

• BoxFit.contain：将子组件调整为适合盒子，同时保持其宽高比。
• BoxFit.cover：将子组件调整为完全覆盖盒子，可能导致部分子组件被裁剪。
• BoxFit.fill：将子组件拉伸以完全填充盒子，忽略其宽高比。
• BoxFit.fitHeight：将子组件调整为适合盒子的高度，同时保持其宽高比。
• BoxFit.fitWidth：将子组件调整为适合盒子的宽度，同时保持其宽高比。
• BoxFit.none：不调整子组件的大小，让它保持其固有大小。

区别

特征	SizeBox	FittedBox
大小控制	强制	调整
宽高比	保留	保留
BoxFit	无	有

何时使用

• 使用 SizeBox 在指定空间内强制子组件的大小，例如创建按钮或固定大小的容器。
• 使用 FittedBox 调整子组件的大小以适应其容器，同时保持其宽高比，例如调整图像或图标的大小。

结论

SizeBox 和 FittedBox 是 Flutter 中强大且用途广泛的组件，用于控制子组件的大小和布局。通过理解它们的用法和区别，开发者可以创建布局优雅、响应迅速的应用程序。