摘要：

头像组件(A_Avatar)：支持使用图片、图标或文本形成头像，可设置头像大小，可设置圆形或方形头像，可设置背景色。

调用示例一：图标式头像

提示：mdi图标库的获得方式：Material Design Icons - Icon Library - Pictogrammers
1.将头像组件拖拽到排版区
2.头像类型：图标；设置mdi图标
3.保存设置

调用示例二：图片式头像

1.将头像组件拖拽到排版区
2.头像选择类型图片，组件值设置为一个图片的地址
3.保存设置

调用示例三：文字头像。组件值仅支持一个英文字母或中文汉字。

1.将头像组件拖拽到排版区
2.头像类型：文本;组件值：输入一个字母，如：A
3.保存设置

调用示例四：样式参数。设置头像大小、方形头像、背景颜色

调用示例五：绑定动态数据

比如，在用户个人资料页面，用户的头像需要动态绑定从后端查询的字段参数上。

生成纯血鸿蒙代码：

 GridCol({ span: 4 }) {
              A_Avatar({
                color: ColorConstants.INFO,
                icon: 'mdi-account'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                src: 'https://cdn.aigcoder.com/sample/Avatar/avatar3.jpeg'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                color: ColorConstants.INFO,
                text: 'A'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                avatarSize: 60,
                circle: false,
                color: ColorConstants.SUCCESS,
                icon: 'mdi-account'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                src: this.user.avatar
              })
            }

以下分别为头像组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：

头像组件各属性字段解释如下：

/**
 * 【头像】
 * src：头像图片
 * icon：图标(可选)
 * text：文本(可选)
 * avatarSize：头像大小
 * circle：圆形
 * color：背景色
 */
@Component
export struct A_Avatar {
  @Prop src: string
  @Prop icon: string
  @Prop text: string
  @Prop avatarSize: number = 48
  @Prop circle: boolean = true
  @Prop color: ResourceStr = ColorConstants.INFO