Flutter如何实现圆形头像叠加排列效果？

我第一次做这个需求，翻了好多论坛都没找到解决办法，想实现重叠排列的头像组（前几个是用户头像，最后一个显示剩余人数），右侧搭配时间文本的效果。当前我的代码实现如下：

Padding(
  padding: const EdgeInsets.only(top: 15), 
  child: Row(
    children: const [                      
      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 18,
        child: CircleAvatar(
          radius: 16,
          backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
        ),
      ),
      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 18,
        child: CircleAvatar(
          radius: 16,
          backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
        ),
      ),
      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 18,
        child: CircleAvatar(
          radius: 16,
          backgroundImage: AssetImage('lib/assets/avatar-410658-028235png.png'),
        ),
      ),
      CircleAvatar(
        backgroundColor: Colors.white,
        radius: 20,
        child: CircleAvatar(
          radius: 18, 
          backgroundColor: Colors.black,
          child: Text('28', style: TextStyle(fontSize: 12.5, color: Colors.white ),),
        )
      ),
      Padding(
        padding: EdgeInsets.only(left: 70),  
        child: Text('6 Hours Ago', style: TextStyle(fontSize: 12.5),)
      ),
    ],
  ),
)

修改方案 #

要实现头像重叠的效果，核心是给后续头像设置负左边距让它们和前一个头像部分重叠，同时优化整体布局的对齐方式：

Padding(
  padding: const EdgeInsets.only(top: 15),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 头像组容器
      Row(
        children: [
          // 第一个头像
          _buildAvatar('lib/assets/avatar-410658-028235png.png'),
          // 第二个头像，设置负margin实现重叠
          Container(
            margin: const EdgeInsets.only(left: -8),
            child: _buildAvatar('lib/assets/avatar-410658-028235png.png'),
          ),
          // 第三个头像
          Container(
            margin: const EdgeInsets.only(left: -8),
            child: _buildAvatar('lib/assets/avatar-410658-028235png.png'),
          ),
          // 剩余计数头像
          Container(
            margin: const EdgeInsets.only(left: -8),
            child: CircleAvatar(
              backgroundColor: Colors.white,
              radius: 18,
              child: CircleAvatar(
                radius: 16,
                backgroundColor: Colors.black,
                child: Text(
                  '28',
                  style: TextStyle(fontSize: 12.5, color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
      // 用Spacer把时间推到右侧
      const Spacer(),
      const Text('6 Hours Ago', style: TextStyle(fontSize: 12.5)),
    ],
  ),
)

// 提取头像构建方法，减少重复代码
Widget _buildAvatar(String assetPath) {
  return CircleAvatar(
    backgroundColor: Colors.white,
    radius: 18,
    child: CircleAvatar(
      radius: 16,
      backgroundImage: AssetImage(assetPath),
    ),
  );
}

关键调整点 #

• 头像重叠：通过margin: EdgeInsets.only(left: -8)让每个后续头像向左偏移，和前一个头像重叠，偏移值可根据视觉需求调整
• 布局对齐：主Row设置crossAxisAlignment: CrossAxisAlignment.center保证所有元素垂直居中，用Spacer()替代固定左间距，让时间自动靠右，适配不同屏幕宽度
• 代码复用：提取_buildAvatar方法，避免重复代码，方便后续统一修改头像样式
• 视觉统一：把计数头像的大小调整成和其他头像一致，保持整体视觉协调

内容的提问来源于stack exchange，提问作者Назар Марцинко