Flutter如何实现圆形头像堆叠效果？代码调试求助

我想要实现下图展示的多人物圆形头像堆叠效果，尝试了以下Flutter代码但未得到预期结果：

我的代码：

Padding(
  padding: EdgeInsets.only(top: 7),
  child: Stack(
    children: <Widget>[
      Positioned(
        left: 0,
        child: CircleAvatar(
          radius: radius,
          //    backgroundColor: Colors.red,
          backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          backgroundColor: Colors.transparent,
        ),
      ),
      Positioned(
        left: 12,
        child: CircleAvatar(
          radius: radius,
          //   backgroundColor: Colors.red,
          backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          backgroundColor: Colors.transparent,
        ),
      ),
      Positioned(
        left: 28,
        child: CircleAvatar(
          radius: radius,
          //  backgroundColor: Colors.red,
          backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          backgroundColor: Colors.transparent,
        ),
      ),
      Positioned(
        left: 35,
        child: CircleAvatar(
          radius: radius - 5,
          //  backgroundColor: Colors.red,
          backgroundImage: AssetImage(AssetImages.ADDITIONAL),
          backgroundColor: Colors.transparent,
        ),
      )
    ],
  ),
)

问题分析与修复方案 #

现有代码核心思路正确，但未达预期是因为：头像重叠间距不合理、缺少区分边界的白色边框、最后一个添加按钮的尺寸和位置适配不佳。

修复后的代码示例

Padding(
  padding: const EdgeInsets.only(top: 7),
  child: Stack(
    children: [
      // 第一个头像
      Positioned(
        left: 0,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
          ),
          child: CircleAvatar(
            radius: 20,
            backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          ),
        ),
      ),
      // 第二个头像
      Positioned(
        left: 25,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
          ),
          child: CircleAvatar(
            radius: 20,
            backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          ),
        ),
      ),
      // 第三个头像
      Positioned(
        left: 50,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
          ),
          child: CircleAvatar(
            radius: 20,
            backgroundImage: AssetImage(AssetImages.CHALLENGEPERSON1),
          ),
        ),
      ),
      // 添加按钮头像
      Positioned(
        left: 75,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.white, width: 2),
          ),
          child: CircleAvatar(
            radius: 20,
            backgroundImage: AssetImage(AssetImages.ADDITIONAL),
            backgroundColor: Colors.grey[200],
          ),
        ),
      ),
    ],
  ),
)

优化建议（支持动态头像数量）

如果需要适配动态数量的头像，用循环生成可避免重复代码：

Widget buildStackedAvatars(List<String> imagePaths, String addIconPath) {
  final double avatarRadius = 20;
  final double overlapDistance = 25; // 头像重叠间距

  return Padding(
    padding: const EdgeInsets.only(top: 7),
    child: Stack(
      children: [
        // 生成普通头像
        for (int i = 0; i < imagePaths.length; i++)
          Positioned(
            left: i * overlapDistance,
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(color: Colors.white, width: 2),
              ),
              child: CircleAvatar(
                radius: avatarRadius,
                backgroundImage: AssetImage(imagePaths[i]),
              ),
            ),
          ),
        // 添加按钮头像
        Positioned(
          left: imagePaths.length * overlapDistance,
          child: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.white, width: 2),
            ),
            child: CircleAvatar(
              radius: avatarRadius,
              backgroundImage: AssetImage(addIconPath),
              backgroundColor: Colors.grey[200],
            ),
          ),
        ),
      ],
    ),
  );
}

// 使用示例：
// buildStackedAvatars(
//   [AssetImages.CHALLENGEPERSON1, AssetImages.CHALLENGEPERSON1, AssetImages.CHALLENGEPERSON1],
//   AssetImages.ADDITIONAL,
// )

关键调整说明 #

• 给每个头像添加白色边框，让重叠区域边界清晰，匹配参考图效果
• 统一头像半径，调整left值优化重叠比例
• 移除不必要的透明背景设置，CircleAvatar默认会适配图片背景
• 让添加按钮和其他头像保持一致的尺寸与重叠间距

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