Flutter 重复造轮子 (4) Stack Avatar G

详细可以访问仓库 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

参数	说明	类型	默认值	是否必填
avatarList	头像列表	List<HcAvatarItem>	-	true
size	单个头像的大小	double	40.0	false
radius	单个头像圆角	double	99999	false
spaceWidth	两个组件间隔	double	0.7	false
reverse	是否颠倒	bool	false	false
borderColor	边框的颜色	Color	Colors.grey	false
borderWidth	边框的宽度	double	1.0	false
showMoreIcon	是否展示更多的按钮	bool	false	false

spaceWidth

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

HcAvatarItem

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

参数	说明	类型	默认值	是否必填
backgroundImageUrl	背景图片地址	String	-	false
foregroundImageUrl	前景图片地址	String	-	false
name	用户名称	String	-	false
backgroundColor	背景颜色	Color	-	false
icon	图标	IconData	-	false

项目源码

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(),
        ),
      );
    });
  }
}