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

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

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

1. 基础使用

1.1 组件引入

1. import { Avatar } from "../../components/Avatar"

复制代码

1.2 基础示例

1. // 文字头像
2. Avatar({ props: { text: '张', randomBgColor: true } })
4. // 图片头像
5. Avatar({ props: { src: $r('app.media.default_avatar') } })
7. // 图标头像
8. Avatar({ props: { icon: $r('app.media.default_avatar') } })

复制代码

使用说明：

• 笔墨头像：适合表现用户名首字母或简称
  
• 图片头像：用于展示用户真实头像
  
• 图标头像：实用于默认头像或占位图标
  

2. 样式定制

2.1 尺寸设置

1. // 预设尺寸
2. Avatar({ props: { text: '小', size: AvatarSize.MINI } })
3. Avatar({ props: { text: '中', size: AvatarSize.SMALL } })
4. Avatar({ props: { text: '大', size: AvatarSize.MEDIUM } })
5. Avatar({ props: { text: '特', size: AvatarSize.LARGE } })
7. // 自定义尺寸
8. Avatar({ props: { text: '自', size: 56 } })

复制代码

尺寸说明：

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

2.2 形状设置

1. // 圆形（默认）
2. Avatar({ props: { text: 'A', shape: AvatarShape.CIRCLE } })
4. // 方形
5. Avatar({ props: { text: 'B', shape: AvatarShape.SQUARE } })

复制代码

形状说明：

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

2.3 颜色定制

1. // 随机背景色
2. Avatar({ props: { text: '随', randomBgColor: true } })
4. // 自定义背景色
5. Avatar({ props: { text: '蓝', bgColor: '#1890ff' } })
6. Avatar({ props: { text: '绿', bgColor: '#52c41a' } })
7. Avatar({ props: { text: '红', bgColor: '#f5222d' } })

复制代码

颜色设置说明：

• 随机背景致：
  
  
  
  • 从预设颜色池中随机选择
    
  • 确保视觉效果的同等性
    
  
  
• 自定义背景致：
  
  
  
  • 支持品牌色系定制
    
  • 可配合主题体系使用
    
  
  

3. 布局应用

3.1 Flex布局示例

1. Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
2.     Avatar({ props: { text: 'A', randomBgColor: true } })
3.         .margin({ right: 16, bottom: 16 })
4.     Avatar({ props: { text: 'B', randomBgColor: true } })
5.         .margin({ right: 16, bottom: 16 })
6.     Avatar({ props: { text: 'C', randomBgColor: true } })
7.         .margin({ right: 16, bottom: 16 })
8. }
9. .width('100%')

复制代码

布局说明：

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

3.2 列表应用示例

1. List() {
2.     ListItem() {
3.         Row() {
4.             Avatar({ props: { text: '用', randomBgColor: true } })
5.                 .margin({ right: 12 })
6.             Column() {
7.                 Text('用户名称')
8.                     .fontSize(16)
9.                 Text('用户描述信息')
10.                     .fontSize(14)
11.                     .opacity(0.6)
12.             }
13.             .alignItems(HorizontalAlign.Start)
14.         }
15.         .width('100%')
16.         .padding(16)
17.     }
18. }

复制代码

应用说明：

• 结合Row和Column布局
  
• 公道设置间距和对齐
  
• 注意笔墨层级关系
  

4. 错误处理惩罚

4.1 图片加载错误处理惩罚

1. Avatar({
2.     props: {
3.         src: 'invalid_image_url',
4.         onError: () => {
5.             console.info('Avatar image load failed')
6.         }
7.     }
8. })

复制代码

错误处理惩罚说明：

• 主动降级表现默认头像
  
• 触发onError回调函数
  
• 可在回调中进行日记记录或状态更新
  

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。