如何在 Flutter 中将图像缩放为中心裁剪并在其上应用换行内容的宽度？

Question

我相信有很多 Android 开发人员一直在寻找 Flutter 开发中 match_parent 和 wrap_content 属性的替代品。 我有一种情况，我必须放置一个高度应该为 210.0 的图像并采用父级的宽度。 由于真实图像的尺寸要大得多，我面临的问题是它被裁剪显示并且图像的某些部分被遗漏。

有谁知道我如何才能获得图像使用父级的宽度并适合定义的高度 210.0 但仍以其全部容量显示？ 在 Android XML 中，我将通过设置宽度来包装内容并使用 centerCrop 缩放图像来解决它。

提前致谢。

Answer 1

看看官方文档，我相信BoxFit 枚举涵盖了你所需要的。

如果我正确理解了您的问题， BoxFit.fitHeight将完成这项工作：

SizedBox(
      height: 210,
      child: Image.network(
        'https://picsum.photos/2560/1440?image=29',
        fit: BoxFit.fitHeight,
      )
  )

如果你想摆弄它（比如尝试其他 BoxFits，即时更改设备宽度......）我已经为你制作了这个 DartPad： https://dartpad.dev/fca40b807b3698067e9a923474cb0394

如果这不是您想要的，请更清楚地解释您要实现的目标。 我的意思是：

1. 避免将您在其他框架中的方法作为解释您想要的主要方式进行比较。 SO用户浏览flutter和dart可能熟悉也可能不熟悉android xml布局。

2. 在处理 UI 时，一些简单的草图有助于理解要点。

3. 您没有说是否要保持纵横比。 我猜你确实想保持纵横比，但在这种情况下，图像要么必须缩小（而不是“全容量”）或裁剪（“图像的一部分被遗漏。”），你可以'在不扭曲纵横比的情况下两者兼而有之。