12 【HarmonyOS NEXT】 仿uv-ui组件开发之Avatar组件设计精髓(三)

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

第三篇：掌握Avatar组件的样式魔法与灵活定制

1. 基础使用

1.1 组件引入

import { Avatar } from "../../components/Avatar"
复制

1.2 基础示例

// 文字头像
Avatar({ props: { text: '张', randomBgColor: true } })

// 图片头像
Avatar({ props: { src: $r('app.media.default_avatar') } })

// 图标头像
Avatar({ props: { icon: $r('app.media.default_avatar') } })
复制

使用说明：

1. 文字头像：适合显示用户名首字母或简称
2. 图片头像：用于展示用户真实头像
3. 图标头像：适用于默认头像或占位图标

2. 样式定制

2.1 尺寸设置

// 预设尺寸
Avatar({ props: { text: '小', size: AvatarSize.MINI } })
Avatar({ props: { text: '中', size: AvatarSize.SMALL } })
Avatar({ props: { text: '大', size: AvatarSize.MEDIUM } })
Avatar({ props: { text: '特', size: AvatarSize.LARGE } })

// 自定义尺寸
Avatar({ props: { text: '自', size: 56 } })
复制

尺寸说明：

• MINI (24px)：适用于密集列表
• SMALL (32px)：适用于常规列表
• MEDIUM (40px)：默认尺寸
• LARGE (48px)：适用于详情展示
• 自定义数值：满足特殊场景需求

2.2 形状设置

// 圆形（默认）
Avatar({ props: { text: 'A', shape: AvatarShape.CIRCLE } })

// 方形
Avatar({ props: { text: 'B', shape: AvatarShape.SQUARE } })
复制

形状说明：

• CIRCLE：圆形头像，视觉效果柔和
• SQUARE：方形头像，边角圆润（4px圆角）

2.3 颜色定制

// 随机背景色
Avatar({ props: { text: '随', randomBgColor: true } })

// 自定义背景色
Avatar({ props: { text: '蓝', bgColor: '#1890ff' } })
Avatar({ props: { text: '绿', bgColor: '#52c41a' } })
Avatar({ props: { text: '红', bgColor: '#f5222d' } })
复制

颜色设置说明：

1. 随机背景色：

   • 从预设颜色池中随机选择
   • 确保视觉效果的一致性

2. 自定义背景色：

   • 支持品牌色系定制
   • 可配合主题系统使用

3. 布局应用

3.1 Flex布局示例

Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
    Avatar({ props: { text: 'A', randomBgColor: true } })
        .margin({ right: 16, bottom: 16 })
    Avatar({ props: { text: 'B', randomBgColor: true } })
        .margin({ right: 16, bottom: 16 })
    Avatar({ props: { text: 'C', randomBgColor: true } })
        .margin({ right: 16, bottom: 16 })
}
.width('100%')
复制

布局说明：

• 使用Flex布局实现灵活排列
• 设置合适的间距
• 支持自动换行

3.2 列表应用示例

List() {
    ListItem() {
        Row() {
            Avatar({ props: { text: '用', randomBgColor: true } })
                .margin({ right: 12 })
            Column() {
                Text('用户名称')
                    .fontSize(16)
                Text('用户描述信息')
                    .fontSize(14)
                    .opacity(0.6)
            }
            .alignItems(HorizontalAlign.Start)
        }
        .width('100%')
        .padding(16)
    }
}
复制

应用说明：

• 结合Row和Column布局
• 合理设置间距和对齐
• 注意文字层级关系

4. 错误处理

4.1 图片加载错误处理

Avatar({
    props: {
        src: 'invalid_image_url',
        onError: () => {
            console.info('Avatar image load failed')
        }
    }
})
复制

错误处理说明：

1. 自动降级显示默认头像
2. 触发onError回调函数
3. 可在回调中进行日志记录或状态更新

下一篇教程将介绍Avatar组件的性能优化和最佳实践，敬请期待！