领先图片在ListTile中溢出

Question

我有一个带有ListTile的ListView。每个ListTile都有一个带有Text的title，一个带有Text的subtitle和一个带有Image的leading。

现在，图像太大了，垂直伸展到下一行，与那里的图像重叠。

如何确保图像留在边界内？

编辑：

我不想给图像一个固定的大小，而是让它根据标题+副标题的内在高度调整列表项的高度。

- user3612643

Answer 1

在ListTile中使用CircleAvatar作为leading。如果需要，它还有一个radius属性可以更改。

leading: CircleAvatar(
  backgroundImage: AssetImage("..."), // No matter how big it is, it won't overflow
),

---

如果您想使用矩形图片，可以使用{{rectangle image}}。

leading: ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 44,
    minHeight: 44,
    maxWidth: 64,
    maxHeight: 64,
  ),
  child: Image.asset(profileImage, fit: BoxFit.cover),
),

- CopsOnRoad

---

我们也有一个 BoxAvatar 吗？ - user3612643

没有BoxAvatar，您可以使用ConstrainedBox并根据需要设置最小/最大宽度/高度。 - CopsOnRoad

嗨，当我尝试使用Flutter时，我遇到了“FlutterError（无法加载资产：http / www.blabla ......）”异常。 我在[Harsh Bhikadia]（https://dev59.com/w1MI5IYBdhLWcg3wq9WL#55642120）的解决方案中也遇到了相同的异常。 您知道它可能是由什么原因引起的吗？ - Tim's

@Tim，你可能想看一下这个答案，它告诉你如何将图片添加到你的项目中：链接。 - CopsOnRoad

@CopsOnRoad，但我正在从网络上获取图像（来自Firebase存储）。如何使用Web图像实现相同的方法？在其他地方使用图像没有问题，但在listTile中出现了问题。 - Tim's

@Tim，请您提出一个单独的问题，我需要看到您的代码才能帮助您。谢谢。 - CopsOnRoad

Answer 2

请执行以下操作：

leading: SizedBox(
  height: 100.0,
  width: 100.0, // fixed width and height
  child: Image.asset(...)
)

- Harsh Bhikadia

---

我想让图像适应标题和副标题的高度。 - user3612643

图像本身也有一个 fit：BoxFit 属性，但它无效。为什么 FittedBox 更好？ - user3612643