如何在Flutter中实现如图所示的多圆形头像UI

要实现你需要的多圆形重叠头像效果，可以通过自定义Widget来实现，下面是完整的代码示例，支持动态头像列表、自定义大小、重叠宽度以及最大显示数量：

完整实现代码 #

import 'package:flutter/material.dart';

class OverlappingAvatarGroup extends StatelessWidget {
  final List<String> avatarUrls;
  final double avatarSize;
  final double overlapWidth;
  final int maxVisibleAvatars;

  const OverlappingAvatarGroup({
    super.key,
    required this.avatarUrls,
    this.avatarSize = 40,
    this.overlapWidth = 12,
    this.maxVisibleAvatars = 4,
  });

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.horizontal,
      children: _buildAvatarList(),
    );
  }

  List<Widget> _buildAvatarList() {
    final List<Widget> avatars = [];
    final int displayCount = avatarUrls.length > maxVisibleAvatars ? maxVisibleAvatars : avatarUrls.length;

    // 生成可见的头像
    for (int i = 0; i < displayCount; i++) {
      avatars.add(
        Container(
          // 从第二个头像开始设置负左边距实现重叠
          margin: EdgeInsets.only(left: i > 0 ? -overlapWidth : 0),
          child: CircleAvatar(
            radius: avatarSize / 2,
            backgroundImage: NetworkImage(avatarUrls[i]),
            // 图片加载失败时的占位背景色
            backgroundColor: Colors.grey[200],
          ),
        ),
      );
    }

    // 头像数量超过最大显示数时，添加剩余数量提示
    if (avatarUrls.length > maxVisibleAvatars) {
      avatars.add(
        Container(
          margin: EdgeInsets.only(left: -overlapWidth),
          child: CircleAvatar(
            radius: avatarSize / 2,
            backgroundColor: Colors.grey[200],
            child: Text(
              '+${avatarUrls.length - maxVisibleAvatars}',
              style: TextStyle(
                fontSize: avatarSize / 3,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      );
    }

    return avatars;
  }
}

// 使用示例页面
class AvatarDemoPage extends StatelessWidget {
  const AvatarDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 模拟头像列表
    final List<String> sampleAvatars = [
      'https://picsum.photos/200/200?random=1',
      'https://picsum.photos/200/200?random=2',
      'https://picsum.photos/200/200?random=3',
      'https://picsum.photos/200/200?random=4',
      'https://picsum.photos/200/200?random=5',
    ];

    return Scaffold(
      appBar: AppBar(title: const Text('多圆形头像示例')),
      body: const Center(
        child: OverlappingAvatarGroup(
          avatarUrls: sampleAvatars,
          avatarSize: 50,
          overlapWidth: 15,
          maxVisibleAvatars: 4,
        ),
      ),
    );
  }
}

关键细节说明 #

• 重叠实现：通过给第二个及以后的头像设置负left margin，让后续头像覆盖在前一个头像的左侧，形成重叠效果
• 动态适配：支持自定义头像大小(avatarSize)、重叠宽度(overlapWidth)和最大显示数量(maxVisibleAvatars)，可根据UI需求调整
• 本地图片适配：如果使用本地资源图片，只需将NetworkImage替换为AssetImage('assets/your_image.png')，记得在pubspec.yaml中配置资源路径
• 数量提示：当头像总数超过最大显示数时，会自动添加一个显示剩余数量的圆形，提升用户体验

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