Flutter ListTile中嵌套CircleAvatar边框不显示问题求助

问题原因 #

ListTile的leading组件有默认尺寸限制（通常最大为40×40），你给外层CircleAvatar设置radius:32时，直径达到64，远超leading的可用空间，导致外层CircleAvatar被裁剪，蓝色边框部分完全无法显示。而ListTile外部没有这个尺寸限制，所以嵌套的CircleAvatar能正常展示边框。

解决方案 #

方案1：用Container实现带边框的圆形头像（推荐）

用Container的decoration设置边框，替代嵌套CircleAvatar的方式，既能精准控制边框样式，又能适配ListTile的leading空间：

Card(
  child: SizedBox(
    width: 200,
    height: 100,
    child: ListTile(
      leading: Container(
        width: 40, // 匹配ListTile leading的默认尺寸
        height: 40,
        decoration: const BoxDecoration(
          color: Colors.blue, // 边框颜色
          shape: BoxShape.circle,
        ),
        child: const CircleAvatar(
          radius: 18, // 内层头像半径，留出2px宽度的边框
          backgroundColor: Colors.red,
        ),
      ),
      title: const Text("test"),
    ),
  ),
)

方案2：调整CircleAvatar半径适配leading空间

如果坚持用嵌套CircleAvatar，把外层半径调整到ListTile leading能容纳的范围即可：

Card(
  child: SizedBox(
    width: 200,
    height: 100,
    child: ListTile(
      leading: const CircleAvatar(
        radius: 20, // 外层半径适配leading默认尺寸
        backgroundColor: Colors.blue,
        child: CircleAvatar(
          radius: 18, // 内层比外层小2px，露出边框
          backgroundColor: Colors.red,
        ),
      ),
      title: const Text("test"),
    ),
  ),
)

方案3：强制扩展leading的可用空间

通过调整ListTile内边距，给leading套SizedBox来预留足够空间，让大尺寸CircleAvatar完整显示：

Card(
  child: SizedBox(
    width: 200,
    height: 100,
    child: ListTile(
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      leading: const SizedBox(
        width: 64,
        height: 64,
        child: CircleAvatar(
          radius: 32,
          backgroundColor: Colors.blue,
          child: CircleAvatar(
            radius: 30,
            backgroundColor: Colors.red,
          ),
        ),
      ),
      title: const Text("test"),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Jordaninho