ListTile 中的前导图像溢出

Posted 2023-02-23

【中文标题】ListTile 中的前导图像溢出

【英文标题】：Leading Image overflows in ListTile

【发布时间】：2019-09-02 15:26:36

【问题描述】：

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

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

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

编辑：

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

【参考方案1】：

这样做：

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

【讨论】：

我想让图片调整为Title+Subtitle的高度。

图像本身也有一个 fit : BoxFit 属性不起作用。为什么 FittedBox 应该更好？

【参考方案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),
),

【讨论】：

我们也有 BoxAvatar 吗？

NO 没有 BoxAvatar，您可以使用另一个选项 ConstrainedBox 并根据您的需要为其指定最小/最大宽度/高度。

嗨，我在尝试使用它时遇到“FlutterError（无法加载资产：http/www.blabla.......”异常。我在Harsh Bhikadia 解决方案中遇到了同样的异常. 你知道它会导致什么吗？

@Tim's 你可能想看看this 回答如何将图像添加到你的项目。

@Tim's 你能问一个单独的问题吗，如果没有看到你的代码，我无法帮助你。谢谢

【参考方案3】：

我的代码和带有字幕和图块的图片如下所示

  Widget _buildRow(WordPair pair) 
    return ListTile(
      title: Text(
        'Title of messages comes here',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(
        pair.asPascalCase,
        style: _font,
      ),
      leading: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: 44,
          minHeight: 44,
          maxWidth: 44,
          maxHeight: 44,
        ),
        child: Image.asset('assets/message_lock.png', fit: BoxFit.cover),
      ),
    );
  

【讨论】：

你能告诉我你的解决方案和我的有什么不同吗？