写点什么

【Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar

发布于: 2021 年 05 月 24 日
【Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar

    小菜在学习过程中,想实现一行半遮挡的用户头像的功能,横向展示过程中,具体包括 右侧头像逐个半遮挡左侧头像左侧头像逐个半遮挡右侧头像 两种展示;


  • 可展示本地图或网络图;

  • 可自定义末尾图标;

  • 可自定义边框样式;


    整个自定义过程主要是通过基础的 Stack 层级和 Positioned 设置偏移量来完成,小菜仅记录一下在测试过程中遇到的小问题;



SeriesCircleProfile

1. 左右半遮挡

    小菜预想的核心功能,是实现不同方向的叠加遮挡效果;其中合适准备采用 Stack 小组件作为头像的层级展示,在通过 Positioned 设置偏移量来设置半遮挡效果;其中 Stack 中的子 Widget 是以栈的方式存储的,即数组后面的元素会覆盖前面的元素;因此左右半遮挡效果主要通过 Positioned 设置偏移量来完成;小菜通过定义 isCoverUp 来判断半遮挡顺序;

1.1 右侧半遮挡左侧

    右侧半遮挡左侧相对较容易,仅需将数组中元素向右侧偏移固定偏移量即可;


List<Widget> _listWid = [Container(height: size)];for (int i = 0; i < urlList.length; i++) {  _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));}return Stack(children: _listWid);
复制代码



1.2 左侧半遮挡右侧

    左侧半遮挡右侧,小菜通过数组倒序方式,然后再将数组向右侧设置固定偏移量;


List<Widget> _listWid = [Container(height: size)];for (int i = urlList.length - 1; i >= 0; i--) {  _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));}return Stack(children: _listWid);
复制代码



2. 本地图 & 网络图

    小菜在自定义传递头像 URL 时考虑到,可能是网络图也可能是本地图,甚至是两者混合展示的;主要分为两类:

2.1 纯本地图 & 纯网络图

    小菜设置 isAsseturlList 中公共的图片属性,本地图或网络图;


if (isCoverUp ?? true) {  if (urlList != null) {    for (int i = urlList.length - 1; i >= 0; i--) {      _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));    }  }} else {  if (urlList != null) {    for (int i = 0; i < urlList.length; i++) {      _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));    }  }}
复制代码



2.2 本地图片 + 网络图混合

    小菜设置一个 List<Map<bool, String>> 类型的 mixUrlListMap 中存储是否为本地图和图片地址,遍历加载时通过 bool 类型判断即可;


if (isCoverUp ?? true) {  if (mixUrlList != null) {    for (int i = mixUrlList.length - 1; i >= 0; i--) {      _listWid.add(_itemWid(mixUrlList[i].keys.first, mixUrlList[i].values.first, i, null));    }  }} else {  if (mixUrlList != null) {    for (int i = 0; i < mixUrlList.length; i++) {      _listWid.add(_itemWid(mixUrlList[i].keys.first ?? false, mixUrlList[i].values.first, i, null));    }  }}
复制代码



3. 末尾图标

    在用户头像较多点情况下,很多场景需要一个末尾省略图标,小菜提供了一个 endIconWidget 以供自定义图标的样式,可以是图片或文字或其他等展示效果;值得注意的是,之前小菜设置了 右侧半遮挡左侧左侧半遮挡右侧 两种效果;因此该图标不仅需要对应的偏移量,还需要针对这两种情况先后不同顺序添加在 Stack 栈内;


List<Widget> _listWid = [Container(height: size)];if (isCoverUp ?? true) {  if (urlList != null) {    if (endIcon != null) {      _listWid.add(_itemWid(isAsset ?? false, null, urlList.length, endIcon));    }    for (int i = urlList.length - 1; i >= 0; i--) {      _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));    }  } else if (mixUrlList != null) {    if (endIcon != null) {      _listWid.add(_itemWid(isAsset ?? false, null, mixUrlList.length, endIcon));    }    for (int i = mixUrlList.length - 1; i >= 0; i--) {      _listWid.add(_itemWid(mixUrlList[i].keys.first, mixUrlList[i].values.first, i, null));    }  }} else {  if (urlList != null) {    for (int i = 0; i < urlList.length; i++) {      _listWid.add(_itemWid(isAsset ?? false, urlList[i], i, null));    }    if (endIcon != null) {      _listWid.add(_itemWid(isAsset ?? false, null, urlList.length, endIcon));    }  } else if (mixUrlList != null) {    for (int i = 0; i < mixUrlList.length; i++) {      _listWid.add(_itemWid(mixUrlList[i].keys.first ?? false, mixUrlList[i].values.first, i, null));    }    if (endIcon != null) {      _listWid.add(_itemWid(isAsset ?? false, null, mixUrlList.length, endIcon));    }  }}
return Stack(children: _listWid);
复制代码



4. 自定义 Border

    对于个性化需求,是否需要边框,以及边框颜色和粗细,这些属于相对简单边缘的功能点;小菜予以补充,添加了 isBorder、borderColor 和 borderWidth 属性;


return Positioned(    left: (spaceWidth ?? _kSpaceWidth) * index,    child: Container(        width: size, height: size,        decoration: BoxDecoration(            border: (isBorder ?? false) == false ? null : Border.all(color: borderColor ?? _kBorderColor, width: borderWidth ?? _kBorderWidth),            color: Colors.grey, shape: BoxShape.circle),        child: PhysicalModel(            color: Colors.transparent, shape: BoxShape.circle,            clipBehavior: Clip.antiAlias, borderRadius: BorderRadius.all(Radius.circular(20.0)),            child: Container(width: size, height: size,                child: endIcon ?? (asset ? Image.asset(url) : Image.network(url))))));
复制代码



CircleAvatar

    小菜在设置圆形头像时了解到 CircleAvatar 组件,Flutter 提供了很多绘制圆形的方法,小菜趁此机会简单学习一下 CircleAvatarCircleAvatar 比较特殊,通常用于用户图片和内容一同展示,且为了保持效果一致,给定用户的姓名缩写应始终与相同的背景色配对;

源码分析

const CircleAvatar({    Key key,    this.child,             // 子 Widget    this.backgroundColor,   // 背景色    this.backgroundImage,   // 背景图    this.foregroundColor,   // 子 Widget 颜色    this.radius,            // 半径    this.minRadius,         // 最小半径    this.maxRadius,         // 最大半径})
复制代码


    简单分析源码可得,主要是通过 BoxConstraints 来限制最大最小半径,而 backgroundImage 来设置背景图;

案例尝试

1. child

    childCircleAvatar 中居中展示的子 Widget,一般是 TextView,用于展示姓名等;若设置图片则不会进行圆形裁切;


return CircleAvatar(radius: 40.0, child: Text(index == 0 ? 'ACE' : 'Hi'));
复制代码



2. backgroundImage

    backgroundImageCircleAvatar 图片背景,默认居中裁切,注意 backgroundImage 对应的是 ImageProvider 而非 Widget,因此加载图片时只能采用 AssetImageNetworkImage 方式;


return CircleAvatar(    radius: 40.0,    backgroundImage: index != 0        ? NetworkImage('https://locadeserta.com/game/assets/images/background/landing/1.jpg')        : AssetImage('images/icon_hzw01.jpg'));
复制代码



3. backgroundColor & foregroundColor

    backgroundColorforegroundColor 分别对应背景颜色和子 child 颜色,除非两个颜色均设置,否则两个背景色会之间会自动匹配;默认 backgroundColor 对应 Theme 的主题颜色;


return CircleAvatar(    radius: 40.0,    child: Text(index == 0 ? 'ACE' : 'Hi'),    backgroundColor: (index == 0) ? null : Colors.deepOrange,    foregroundColor: (index == 0) ? null : Colors.blue);
复制代码



4. radius & minRadius & maxRadius

    了解源码可得,CircleAvatar 是通过 BoxConstraints 来限制半径范围的;若设置 radius 则其余两个不生效;默认 minRadius20 像素密度;


return CircleAvatar(    maxRadius: 50.0,    child: Text('ACE'),    backgroundColor: Colors.deepOrange,    foregroundColor: Colors.white,    backgroundImage: AssetImage('images/icon_hzw01.jpg'));
复制代码





    SeriesCircleProfile & CircleAvatar 案例源码




    小菜对于系列折叠头像的自定义较为简单,没有使用复杂的 Canvas 绘制,而是通过 StackPositioned 进行展示,逻辑更为简单;如有错误,请多多指导!


来源: 阿策小和尚

发布于: 2021 年 05 月 24 日阅读数: 203
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】122 图解自定义半遮挡头像 SeriesCircleProfile & CircleAvatar