詳細可以訪問倉庫 HcUi: 重復創(chuàng)造Flutter 的輪子 在原有組件上拓展 展現(xiàn)出新的特性 (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,
            ),

設置是否翻轉(zhuǎn)

reverse默認為false false前一個壓后一個 后一個是完整顯示的 true是與之相反

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

設置內(nèi)部子組件間距

        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表示組件間分離 (數(shù)字為size的倍數(shù))

HcAvatarItem

快速構(gòu)建HcAvatar的必要參數(shù) 詳情可以參考HcAvatar

項目源碼

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

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

  //邊框顏色
  final Color borderColor;

  //邊框?qū)挾?  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;
      //最大可展示數(shù)字
      int num = (maxWidth - widgetWidth) ~/ (spaceWidth * widgetWidth);
      //構(gòu)建列表
      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(),
        ),
      );
    });
  }
}