ListTile 中的前导图像溢出

Question

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

现在，图片太大，垂直延伸到下一行，在那里与图片重叠。

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

编辑：

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

Answer 1

这样做：

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

Answer 2

您应该在 ListTile 中使用 CircleAvatar 作为 leading。如果您愿意，它还有一个 radius 属性可以更改。

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

如果你想使用矩形图像，你可以使用

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

ListTile 中的前导图像溢出

Leading Image overflows in ListTile

flutter

flutter-layout

flutter-image