12 【HarmonyOS NEXT】 仿uv-ui组件开发之Avatar组件设计精髓(三)
原创12 【HarmonyOS NEXT】 仿uv-ui组件开发之Avatar组件设计精髓(三)
原创
全栈若城
发布于 2025-03-07 21:57:35
发布于 2025-03-07 21:57:35
温馨提示：本篇博客的详细代码已发布到 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') } })使用说明：
- 文字头像：适合显示用户名首字母或简称
- 图片头像：用于展示用户真实头像
- 图标头像：适用于默认头像或占位图标
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' } })颜色设置说明：
- 随机背景色：
- 从预设颜色池中随机选择
- 确保视觉效果的一致性
- 自定义背景色：
- 支持品牌色系定制
- 可配合主题系统使用
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')
}
}
})错误处理说明：
- 自动降级显示默认头像
- 触发onError回调函数
- 可在回调中进行日志记录或状态更新
下一篇教程将介绍Avatar组件的性能优化和最佳实践，敬请期待！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
