如何在Flutter中实现用户头像堆叠式布局？

要实现头像互相堆叠的效果，只需要在现有代码基础上，给每个头像（除了第一个）添加负左外边距，让后面的头像向左偏移并覆盖在前一个头像的右侧即可。

修改后的代码 #

Row(
  children: List.generate(3, (index) {
    return Column(
      children: [
        Container(
          // 可选：添加白色边框，让堆叠的头像边界更清晰
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(color: Colors.white, width: 2),
          ),
          // 根据索引设置负边距，实现堆叠
          margin: index > 0 ? const EdgeInsets.only(left: -12) : null,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Image.asset(
              'asset/img/profile_photo.png',
              width: 40,
              height: 40,
              fit: BoxFit.cover, // 确保图片填充容器
            ),
          ),
        ),
      ],
    );
  }),
),

关键说明 #

• 负边距设置：index > 0 ? EdgeInsets.only(left: -12) : null 让第2、3个头像向左偏移12像素，叠在前一个头像上。偏移量可以根据你的头像大小调整，比如头像40px宽的话，-12到-15的偏移量比较合适。
• 白色边框：添加白色边框可以避免头像堆叠后完全融合，让每个头像的边界更明显，不需要的话可以去掉Container的decoration部分。
• 图片适配：加上fit: BoxFit.cover确保图片完全填充头像容器，避免拉伸变形。

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