向 CircleAvatar 添加文本会更改其在布局中的位置

Question

向 CircleAvatar 添加文本时，其在布局中的位置会发生轻微变化。 由于我的 CircleAvatars 显示在动态 ListView 中，其中一些将具有文本而另一些只有图像，因此它们的大小和位置需要保持一致。

我在这里只放了 CircleAvatar 的代码示例，因为我认为它的定位应该完全独立于它的内容。

CircleAvatar(
      backgroundColor: getColor(),
      radius: radius,
      child: Text(
        initials,
        style: Theme.of(context).textTheme.bodyLarge?.copyWith(
              fontSize: radius * 0.8,
            ),
      ),
    );

我尝试了以下方法来消除这种差异：

• 将所有内容放入 ConstrainedBox/SizedBox
• 设置 CircleAvatar 的 minRadius/maxRadius
• 将文本居中
• 设置 TextStyle.height
• 通过堆栈放置文本
• 减小文本的大小（更改偏移量，但即使是很小的尺寸也已经弄乱了位置）

但是，这些都没有用，我无法弄清楚这种差异从何而来。

我认为这无关紧要，但它用在几个 ListTiles 的副标题中。

简单的示例，可以很容易地在 DartPad 中进行测试：

ListView(
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    children: const [
      Card(
        child: ListTile(
          title: Text("Item1"),
          subtitle: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 12,
          ),
        ),
      ),
      Card(
        child: ListTile(
          title: Text("Item2"),
          subtitle: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 12,
            child: Text(
              "_",
              style: TextStyle(fontSize: 10),
            ),
          ),
        ),
      ),
    ]),

The layout looks like this

Overlay of two exact same ListTiles to emphasize the change in position, one with a Text(), and one without

Answer 1

我通过简单地向不应包含任何内容的 CircleAvatar 添加一个空文本来解决它。

不是最优的，但至少它是一致的。