详细可以访问仓库 HcUi: 重复创造Flutter 的轮子 在原有组件上拓展 展现出新的特性 (gitee.com)
需要配合HcAvatar组件Flutter 重复造轮子 (2) Avatar 头像显示组件的封装使用

介绍

头像组组件 多层头像横向堆叠

Screenshot_2023-09-07-16-39-51-0900154547.png

代码演示

基础用法

            HcAvatarStackGroup(
              avatarList: [
                HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
                HcAvatarItem(name: "张零"),
              ],
            ),

展示更多按钮

如果有设置群头像可以使用coverImage字段覆盖头像

            HcAvatarStackGroup(
              avatarList: [
                HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
                HcAvatarItem(name: "张零"),
              ],
              showMoreIcon: true,
            ),

设置大小

可以设置头像单个的大小

            HcAvatarStackGroup(
              size: 36,
              avatarList: [
                HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
                HcAvatarItem(name: "张零"),
              ],
              showMoreIcon: true,
            ),

设置是否翻转

reverse默认为false false前一个压后一个 后一个是完整显示的 true是与之相反

            HcAvatarStackGroup(
              reverse: false,      
              size: 36,
              avatarList: [
                HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
                HcAvatarItem(name: "张零"),
              ],
              showMoreIcon: true,
            ),

设置内部子组件间距

        HcAvatarStackGroup(
              reverse: false,
              borderWidth: 3,
              size: 36,
              spaceWidth: 0.7,
              borderColor: Colors.yellow,
              avatarList: [
                HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
                HcAvatarItem(name: "张零"),
              ],
              showMoreIcon: true,
            ),

API

props

spaceWidth

spaceWidth 在0-1之间表示组件相折叠 超过1表示组件间分离 (数字为size的倍数)

HcAvatarItem

快速构建HcAvatar的必要参数 详情可以参考HcAvatar

项目源码

class HcAvatarStackGroup extends StatelessWidget {
  //图片的列表
  final List<HcAvatarItem> avatarList;

  //是否展示更多的 Icon
  final bool showMoreIcon;

  //边框颜色
  final Color borderColor;

  //边框宽度
  final double borderWidth;

  //是否反方向
  final bool reverse;

  //缩进大小
  final double spaceWidth;

  //子组件大小
  final double size;

  //子组件的圆角矩形
  final double radius;

  const HcAvatarStackGroup(
      {super.key,
      required this.avatarList,
      this.showMoreIcon = false,
      this.borderColor = HcColor.defaultBorderColor,
      this.borderWidth = HcSize.defaultAvatarBorderWidth,
      this.reverse = false,
      this.spaceWidth = HcSize.defaultAvatarSpaceWidth,
      this.size = HcSize.defaultAvatarSize,
      this.radius = HcSize.defaultMaxRadius});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      //获取最大宽度
      double maxWidth = constraints.maxWidth;
      //每个子组件大小
      double widgetWidth = size + borderWidth * 2;
      //最大可展示数字
      int num = (maxWidth - widgetWidth) ~/ (spaceWidth * widgetWidth);
      //构建列表
      List finalList = avatarList;
      if (finalList.length >= num) {
        finalList = avatarList.sublist(0, showMoreIcon ? num : min(finalList.length,num + 1));
      }
      if (showMoreIcon) {
        finalList.add(HcAvatarItem(icon: Icons.more_horiz_outlined));
      }
      if (reverse) {
        finalList = finalList.reversed.toList();
      }
      return SizedBox(
        height: widgetWidth,
        child: Stack(
          children: finalList
              .map((item) => Positioned(
                  left: widgetWidth *
                      spaceWidth *
                      (reverse
                          ? (finalList.length - finalList.indexOf(item) - 1)
                          : finalList.indexOf(item)),
                  child: HcAvatar(
                    size: size,
                    radius: radius,
                    backgroundImageUrl: item.backgroundImageUrl,
                    foregroundImageUrl: item.foregroundImageUrl,
                    backgroundColor:
                        item?.backgroundColor ?? Theme.of(context).primaryColor,
                    borderWidth: borderWidth,
                    borderColor: borderColor,
                    child: item.icon != null
                        ? Icon(item.icon)
                        : Text(item.name ?? ''),
                  )))
              .toList(),
        ),
      );
    });
  }
}