12 【HarmonyOS NEXT】 仿uv-ui组件开辟之Avatar组件计划精髓(三)
温馨提示：本篇博客的具体代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！https://i-blog.csdnimg.cn/img_convert/e96b2877e0945bd43f780f56ef7248ee.png
第三篇：把握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组件的性能优化和最佳实践，敬请期待！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]