Flutter 中如何使用 AspectRatio 和 FractionallySizedBox？

推荐答案

在 Flutter 中，AspectRatio 和 FractionallySizedBox 是用于控制子组件尺寸的常用 Widget。以下是它们的使用方法：

AspectRatio

AspectRatio 用于强制子组件保持特定的宽高比。

AspectRatio(
  aspectRatio: 16 / 9, // 宽高比为16:9
  child: Container(
    color: Colors.blue,
  ),
);

FractionallySizedBox

FractionallySizedBox 用于根据父容器的尺寸按比例调整子组件的尺寸。

FractionallySizedBox(
  widthFactor: 0.5, // 宽度为父容器宽度的50%
  heightFactor: 0.3, // 高度为父容器高度的30%
  child: Container(
    color: Colors.red,
  ),
);

本题详细解读

AspectRatio 详解

AspectRatio 是一个布局 Widget，它强制子组件保持指定的宽高比。aspectRatio 参数是一个浮点数，表示宽度与高度的比例。例如，16 / 9 表示宽度是高度的 16/9 倍。

• 使用场景：适用于需要保持特定宽高比的场景，如视频播放器、图片展示等。
• 注意事项：如果父容器的尺寸不足以满足指定的宽高比，AspectRatio 会尽可能接近指定的比例。

FractionallySizedBox 详解

FractionallySizedBox 是一个布局 Widget，它根据父容器的尺寸按比例调整子组件的尺寸。widthFactor 和 heightFactor 参数分别表示子组件宽度和高度相对于父容器的比例。

• 使用场景：适用于需要根据父容器尺寸动态调整子组件尺寸的场景，如响应式布局。
• 注意事项：如果 widthFactor 或 heightFactor 为 null，子组件将使用其自身的尺寸。如果父容器的尺寸未确定，FractionallySizedBox 将无法正确计算子组件的尺寸。

通过合理使用 AspectRatio 和 FractionallySizedBox，可以轻松实现复杂的布局需求。