详细可以访问仓库 HcUi: 重复创造Flutter 的轮子 在原有组件上拓展 展现出新的特性 (gitee.com)
需要配合HcAvatar组件Flutter 重复造轮子 (2) Avatar 头像显示组件的封装使用
介绍
头像组组件 九宫格显示头像组 最多显示9张
Screenshot_2023-09-07-16-39-51-0900154547.png
代码演示
基础用法
HcAvatarGridGroup(
avatarList: [
HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
HcAvatarItem(name: "张二"),
HcAvatarItem(name: "张三"),
HcAvatarItem(name: "张四"),
HcAvatarItem(name: "张五"),
HcAvatarItem(name: "张六"),
HcAvatarItem(name: "张七"),
HcAvatarItem(name: "张八"),
HcAvatarItem(name: "张九"),
],
),
群头像
如果有设置群头像可以使用coverImage字段覆盖头像
HcAvatarGridGroup(
avatarList: [
HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
HcAvatarItem(name: "张二"),
HcAvatarItem(name: "张三"),
HcAvatarItem(name: "张四"),
HcAvatarItem(name: "张五"),
HcAvatarItem(name: "张六"),
HcAvatarItem(name: "张七"),
HcAvatarItem(name: "张八"),
HcAvatarItem(name: "张九"),
],
coverImage: 'assets/images/group.png',
),
设置大小
可以设置图片组的总大小 内部子组件自动计算
HcAvatarGridGroup(
size: 64,
avatarList: [
HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
HcAvatarItem(name: "张二"),
HcAvatarItem(name: "张三"),
HcAvatarItem(name: "张五"),
],
),
设置是否翻转
reverse默认为true 表示底部永远铺满缺口再上,如果希望缺口在下请设置false
HcAvatarGridGroup(
size: 64,
reverse: true,
avatarList: [
HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
HcAvatarItem(name: "张二"),
HcAvatarItem(name: "张三"),
HcAvatarItem(name: "张四"),
HcAvatarItem(name: "张五"),
HcAvatarItem(name: "张六"),
HcAvatarItem(name: "张七"),
HcAvatarItem(name: "张八"),
HcAvatarItem(name: "张九"),
],
// coverImage: 'assets/images/group.png',
),
设置内部子组件间距
HcAvatarGridGroup(
size: 64,
reverse: true,
padding: 1,
avatarList: [
HcAvatarItem(backgroundImageUrl: 'assets/images/group.png'),
HcAvatarItem(name: "张二"),
HcAvatarItem(name: "张三"),
HcAvatarItem(name: "张四"),
HcAvatarItem(name: "张五"),
HcAvatarItem(name: "张六"),
HcAvatarItem(name: "张七"),
HcAvatarItem(name: "张八"),
HcAvatarItem(name: "张九"),
],
),
API
props
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| avatarList | 头像列表 | List<HcAvatarItem> | - | true |
| size | 组件大小 | double | 96.0 | false |
| radius | 头像圆角 | double | 10.0 | false |
| padding | 子组件内部间距 | double | 1.0 | false |
| reverse | 是否颠倒 | bool | true | false |
| coverImage | 头像组的覆盖头像 | String | - | false |
| backgroundColor | 背景颜色 | Color | - | false |
HcAvatarItem
快速构建HcAvatar的必要参数 详情可以参考HcAvatar
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| backgroundImageUrl | 背景图片地址 | String | - | false |
| foregroundImageUrl | 前景图片地址 | String | - | false |
| name | 用户名称 | String | - | false |
| backgroundColor | 背景颜色 | Color | - | false |
| icon | 图标 | IconData | - | false |
项目代码
///头像组
class HcAvatarItem {
final String? backgroundImageUrl;
final String? foregroundImageUrl;
final String? name;
final Color? backgroundColor;
final IconData? icon;
HcAvatarItem(
{this.backgroundColor,
this.foregroundImageUrl,
this.name,
this.icon,
this.backgroundImageUrl});
}
class HcAvatarGridGroup extends StatelessWidget {
//图片组
final List<HcAvatarItem> avatarList;
//覆盖图片
final String? coverImage;
//图片组大小
final double size;
final double padding;
final bool reverse;
final Color backgroundColor;
final double? radius;
const HcAvatarGridGroup(
{super.key,
required this.avatarList,
this.coverImage,
this.size = HcSize.defaultAvatarGroupSize,
this.reverse = true,
this.padding = 1,
this.backgroundColor = Colors.grey,
this.radius});
@override
Widget build(BuildContext context) {
//如果是图片组当图片解决
if (coverImage != null) {
return HcAvatar(
size: size,
radius: HcSize.defaultAvatarGroupRadius,
backgroundImageUrl: coverImage,
);
}
if (avatarList.length == 1) {
HcAvatarItem item = avatarList[0];
return HcAvatar(
borderWidth: 0,
size: size,
radius: HcSize.defaultAvatarGroupRadius,
backgroundImageUrl: item.backgroundImageUrl,
foregroundImageUrl: item.foregroundImageUrl,
child: item.icon != null
? Icon(
item.icon,
size: size / 8,
)
: Text(
item.name ?? '',
style: TextStyle(fontSize: size / 8),
),
);
}
//分割列表最大显示九个
List<HcAvatarItem> finalList =
avatarList.length > 9 ? avatarList.sublist(0, 9) : avatarList;
//文字方向
TextDirection textDirection = TextDirection.ltr;
//显示方向
VerticalDirection verticalDirection = VerticalDirection.down;
if (reverse) {
finalList = finalList.reversed.toList();
textDirection = TextDirection.rtl;
verticalDirection = VerticalDirection.up;
}
return Container(
height: size,
width: size,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius:
BorderRadius.circular(radius ?? HcSize.defaultAvatarGroupRadius)),
padding: EdgeInsets.all(padding),
child: Center(
child: Wrap(
spacing: padding,
runSpacing: padding,
direction: Axis.horizontal,
textDirection: textDirection,
verticalDirection: verticalDirection,
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.spaceBetween,
crossAxisAlignment: WrapCrossAlignment.center,
children: finalList
.map((item) => HcAvatar(
borderWidth: 0,
size: finalList.length < 5
? ((size - 3 * padding) / 2)
: ((size - 4 * padding) / 3),
radius: HcSize.defaultAvatarGroupRadius,
backgroundImageUrl: item.backgroundImageUrl,
foregroundImageUrl: item.foregroundImageUrl,
child: item.icon != null
? Icon(
item.icon,
size: size / 8,
)
: Text(
item.name ?? '',
style: TextStyle(fontSize: size / 8),
),
))
.toList(),
),
),
);
}
}
网友评论