【Flutter 组件集录】CircleAvatar | 8 月更文挑战

2,781 阅读3分钟
前言:

这是我参与8月更文挑战的第 16 天,活动详情查看:8月更文挑战。为应掘金的八月更文挑战,我准备在本月挑选 31 个以前没有介绍过的组件,进行全面分析和属性介绍。这些文章将来会作为 Flutter 组件集录 的重要素材。希望可以坚持下去,你的支持将是我最大的动力~

本系列组件文章列表
1.NotificationListener2.Dismissible3.Switch
4.Scrollbar5.ClipPath6.CupertinoActivityIndicator
7.Opacity8.FadeTransition9. AnimatedOpacity
10. FadeInImage11. Offstage12. TickerMode
13. Visibility14. Padding15. AnimatedContainer
16.CircleAvatar17.PhysicalShape18.Divider
19.Flexible、Expanded 和 Spacer 20.Card

一、认识 CircleAvatar 组件

首先看一下CircleAvatar 是什么意思,可能很多人会把它当成一个圆形图片裁剪的组件。其实源码中有介绍:它是代表用户的一个圆。 拿下面的有道词典来说,CircleAvatar 就是用户的头像。另外他可以设置颜色子组件,这样当头像不存在时,一般以颜色和用户名首字母显示。


1.CircleAvatar 基本信息

下面是 CircleAvatar 组件类的定义构造方法,可以看出它继承自 StatelessWidget。配置参数主要是前/背景图片和颜色,还可以设置半径大小。

前景和背景图片都是ImageProvider 对象,都对应一个 ImageErrorListener 进行监听,如果图片加载错误,会触发该回调。

final ImageProvider? backgroundImage;
final ImageProvider? foregroundImage;

final ImageErrorListener? onBackgroundImageError;
final ImageErrorListener? onForegroundImageError;

typedef ImageErrorListener = void Function(Object exception, StackTrace? stackTrace);

2. CircleAvatar 的使用

只要指定图片资源,就能以圆形的展示出来,通过 radius 可以控制圆的大小。

class CircleAvatarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      backgroundImage: AssetImage('assets/images/icon_head.jpg'),
      radius: 40,
    );
  }
}

比如当用户没有头像时,可以通过 背景色 + 用户首字母 作为头像。这里 foregroundColor 代表前景色,可以看到该颜色能作用于 child 对应的文字组件。

class CircleAvatarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      foregroundColor: Colors.white,
      backgroundColor: Colors.blueAccent,
      radius: 25,
      child: const Text( 'T', style: TextStyle(fontSize: 23),),
    );
  }
}

3. 前景图片、背景图片、背景色的关系

能显示的只有一块,那为什么要设置 前景图片背景图片背景色 这么多东西呢?这说明这三者肯定有显示的优先级。

通过源码注释可以了解到,优先级顺序是:

foregroundImage > backgroundImage > backgroundColor

其实也不难理解,图片的加载可能存在错误,尤其是网络图片。CircleAvatar 作为用户的标志,发生图片错误时,应该能有一些适应性。也就是说,如果 foregroundImage 出错,则显示 backgroundImage ,当 backgroundImage 出错,则显示 backgroundColor 。这样有一个兜底的显示,而非空白,或报错,否则对用户而言会产生困惑。


4. CircleAvatar 的动画性

可能很多人都不知道,CircleAvatar 是具有动画性的。比如下面,将 radius25 改为 40 后重构组件,头像是半径动画渐变达到新值。CircleAvatar 的动画性比较弱,属于默认的动画,用户无法指定时长、动画曲线等动画参数。这在一定程度上抛弃灵活性,使使用更加简单。

下面通过源码我们能知道,CircleAvatar 本质上就是基于 AnimatedContainer 实现了,这个组件在上一篇已经介绍了,详见: AnimatedContainer


二、CircleAvatar 的源码实现

它作为一个 StatelessWidget ,就说明其本身只是依赖于其他组件进行构建,逻辑都集中在 build 方法中,并不复杂。


build 方法一开始,会通过 Theme.of 获取主体数据,根据暗亮模式设置文字颜色。


CircleAvatar 是基于 AnimatedContainer 组件实现的功能,其中前背景图片被用于 decorationforegroundDecoration 属性中。子组件会居中,并且嵌套 IconThemeDefaultTextStyle 处理文字和图标默认颜色。默认的动画时长为 kThemeChangeDuration,为200ms

const Duration kThemeChangeDuration = Duration(milliseconds: 200);


CircleAvatar 是一个站在巨人的肩膀上,实现使用都相对比较简单组件。如果想要处理圆形的用户头像,可以考虑这个组件。那 CircleAvatar 的使用方式到这里就介绍完毕,那本文到这里就结束了,谢谢观看,明天见~