前言：
这是我参与8月更文挑战的第 16 天，活动详情查看：8月更文挑战。为应掘金的八月更文挑战，我准备在本月挑选 31 个以前没有介绍过的组件，进行全面分析和属性介绍。这些文章将来会作为 Flutter 组件集录 的重要素材。希望可以坚持下去，你的支持将是我最大的动力~
一、认识 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 是具有动画性的。比如下面，将 radius 从 25 改为 40 后重构组件，头像是半径动画渐变达到新值。CircleAvatar 的动画性比较弱，属于默认的动画，用户无法指定时长、动画曲线等动画参数。这在一定程度上抛弃灵活性，使使用更加简单。
下面通过源码我们能知道，CircleAvatar 本质上就是基于 AnimatedContainer 实现了，这个组件在上一篇已经介绍了，详见： AnimatedContainer 。
二、CircleAvatar 的源码实现
它作为一个 StatelessWidget ，就说明其本身只是依赖于其他组件进行构建，逻辑都集中在 build 方法中，并不复杂。
在 build 方法一开始，会通过 Theme.of 获取主体数据，根据暗亮模式设置文字颜色。
CircleAvatar 是基于 AnimatedContainer 组件实现的功能，其中前背景图片被用于 decoration 和 foregroundDecoration 属性中。子组件会居中，并且嵌套 IconTheme 和 DefaultTextStyle 处理文字和图标默认颜色。默认的动画时长为 kThemeChangeDuration，为200ms 。
const Duration kThemeChangeDuration = Duration(milliseconds: 200);
CircleAvatar 是一个站在巨人的肩膀上，实现和使用都相对比较简单组件。如果想要处理圆形的用户头像，可以考虑这个组件。那 CircleAvatar 的使用方式到这里就介绍完毕，那本文到这里就结束了，谢谢观看，明天见~
