前言:
这是我参与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
的使用方式到这里就介绍完毕,那本文到这里就结束了,谢谢观看,明天见~