ListTile中的主要图像溢出

Question

我有一个ListView和一个ListTile。每个ListTile的{​​{1}}和title，Text和subtitle以及Text和leading。

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

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

编辑：

我不想给图像提供固定的大小，而是让其调整为标题+字幕的固有高度给定的列表图块的高度。

Answer 1

执行以下操作：

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

Answer 2

我的代码以及带有字幕和图块的图片如下

  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),
      ),
    );
  }

Answer 3

您应在CircleAvatar中将leading用作ListTile。它也具有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),
),