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

2025-03-07
北京
本文字数：1719 字
阅读完需：约 6 分钟

温馨提示：本篇博客的详细代码已发布到 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 组件的性能优化和最佳实践，敬请期待！

发布于: 2025-03-07阅读数: 2

原文链接:【http://xie.infoq.cn/article/246b01ac2879dc544275431d4】。文章转载请联系作者。

全栈若城

关注

解读Python与前端技术，助你成为技术大牛 2023-06-28 加入

我是一名专注于 Python 和前端技术的技术讲解者。我擅长将复杂的技术概念转化为简单易懂的语言，帮助初学者快速入门，并满足高级开发者对更深入理解的需求。

发布

暂无评论

创作场景

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

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

1. 基础使用

1.1 组件引入

1.2 基础示例

2. 样式定制

2.1 尺寸设置

2.2 形状设置

2.3 颜色定制

3. 布局应用

3.1 Flex 布局示例

3.2 列表应用示例

4. 错误处理

4.1 图片加载错误处理

全栈若城

评论

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