返回

四种灵活布局 Widgets 助力 Flutter 适配大不同

Android

在日常的 Flutter 页面开发当中，会涉及到各种大小的调配，有时我们希望高度固定，宽度缩放，有时希望宽高按照一定比例来展示，有时希望按照百分比来设置宽高，那么今天我们就看看在 Flutter 当中，都有哪些 Widgets 可以帮助我们完成这些工作。

SizedBox

SizedBox 是一个简单的 Widget，它可以设置一个固定的宽高。如果我们希望创建一个固定大小的盒子，我们可以使用 SizedBox：

SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.red,
  ),
)

SizedBox 不仅可以设置固定的宽高，还可以设置宽高比。如果我们希望创建一个宽高比为 2:1 的盒子，我们可以使用 SizedBox.aspectRatio：

SizedBox.aspectRatio(
  aspectRatio: 2,
  child: Container(
    color: Colors.red,
  ),
)

FractionallySizedBox

FractionallySizedBox 是一个与 SizedBox 类似的 Widget，但它可以按照父容器的百分比来设置宽高。如果我们希望创建一个宽度为父容器的 50%、高度为父容器的 75% 的盒子，我们可以使用 FractionallySizedBox：

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.75,
  child: Container(
    color: Colors.red,
  ),
)

LimitedBox

LimitedBox 是一个可以限制其子 Widget 最大宽高或最小宽高的 Widget。如果我们希望创建一个最大宽度为 200、最大高度为 100 的盒子，我们可以使用 LimitedBox：

LimitedBox(
  maxWidth: 200,
  maxHeight: 100,
  child: Container(
    color: Colors.red,
  ),
)

AspectRatio

AspectRatio 是一个可以设置其子 Widget 宽高比的 Widget。如果我们希望创建一个宽高比为 2:1 的盒子，我们可以使用 AspectRatio：

AspectRatio(
  aspectRatio: 2,
  child: Container(
    color: Colors.red,
  ),
)

总结

SizedBox、FractionallySizedBox、LimitedBox 和 AspectRatio 这四种 Widget 可以帮助我们实现各种复杂的布局需求。通过合理地使用这些 Widget，我们可以轻松地创建出满足不同需求的布局。

希望这篇文章对您有所帮助！如果您有任何问题，请随时与我们联系。