11 【HarmonyOS NEXT】仿 uv-ui 组件开发之 Avatar 组件深度剖析（二）

作者：全栈若城

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

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

第二篇：探秘 Avatar 组件的核心实现机制

1. 组件结构设计

2. 状态管理

2.1 组件状态定义

@Componentexport struct Avatar {    // 私有属性    private props: AvatarProps = {        shape: AvatarShape.CIRCLE,        size: AvatarSize.MEDIUM,        randomBgColor: false    }    @State private loadError: boolean = false    @State private bgColorValue: string = ''}

复制代码

状态说明：

props：组件的主要配置属性，设置默认值
loadError：图片加载错误状态标记
bgColorValue：随机背景色的具体值

2.2 生命周期处理

// 生命周期aboutToAppear() {    if (this.props.randomBgColor) {        this.bgColorValue = this.getRandomColor()    }}

复制代码

生命周期函数说明：

在组件即将出现时初始化随机背景色
只有启用随机背景色时才会生成颜色值

3. 核心方法实现

3.1 随机颜色生成

// 获取随机颜色private getRandomColor(): string {    const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']    return colors[Math.floor(Math.random() * colors.length)]}

复制代码

实现说明：

预定义了一组美观的颜色值
通过随机数获取其中一个颜色
确保颜色搭配的视觉效果

3.2 尺寸计算逻辑

// 获取显示大小private getSize(): number {    if (typeof this.props.size === 'number') {        return this.props.size    }    const currentSize = this.props.size ?? AvatarSize.MEDIUM    switch (currentSize) {        case AvatarSize.MINI:            return 24        case AvatarSize.SMALL:            return 32        case AvatarSize.MEDIUM:            return 40        case AvatarSize.LARGE:            return 48        default:            return 40    }}

复制代码

实现说明：

优先使用自定义数值尺寸
根据预设类型返回对应的像素值
默认返回中等尺寸（40px）

4. 渲染实现

4.1 背景渲染

// 背景渲染if (this.props.randomBgColor || this.props.bgColor) {    Circle()        .fill(this.props.bgColor ?? this.bgColorValue)        .width('100%')        .height('100%')}

复制代码

实现说明：

条件渲染背景圆形
优先使用自定义背景色
保持背景充满容器

4.2 内容渲染逻辑

// 内容渲染if (this.props.text) {    // 文字模式    Text(this.props.text)        .fontSize(this.getSize() * 0.4)        .fontColor(Color.White)} else if (this.props.icon) {    // 图标模式    Image(this.props.icon)        .width('60%')        .height('60%')        .objectFit(ImageFit.Contain)} else if (this.props.src && !this.loadError) {    // 图片模式    Image(this.props.src)        .width('100%')        .height('100%')        .objectFit(ImageFit.Cover)        .onError(() => {            this.loadError = true            this.props.onError?.()        })} else {    // 加载失败默认图标    Image($r("app.media.default_avatar"))        .width('100%')        .height('100%')        .objectFit(ImageFit.Cover)}

复制代码

渲染逻辑说明：

文字模式：
字体大小与头像尺寸成比例
使用白色确保可读性
图标模式：
控制图标大小比例
使用 Contain 确保完整显示
图片模式：
图片充满容器
使用 Cover 确保填充效果
处理加载错误情况
降级处理：
使用默认头像兜底
保持统一的展示效果

5. 样式处理

// 容器样式Stack({ alignContent: Alignment.Center }) {    // 内容渲染}.width(this.getSize()).height(this.getSize()).borderRadius(this.props.shape === AvatarShape.SQUARE ? 4 : this.getSize() / 2)

复制代码

样式说明：

使用 Stack 布局确保内容居中
宽高保持一致，由尺寸决定
根据形状类型设置圆角：方形：固定 4px 圆角圆形：圆角为尺寸的一半

6. 性能优化

状态管理优化
使用私有属性减少不必要的更新
合理使用 State 装饰器
避免频繁的状态变更
渲染优化
条件渲染减少不必要的 DOM 操作
使用适当的图片填充模式
合理控制图片资源大小
错误处理优化
统一的错误降级策略
提供错误回调机制
避免错误状态的频繁切换

下一篇教程将介绍 Avatar 组件的使用方法和样式定制，敬请期待！

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

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

全栈若城

关注

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

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

发布

暂无评论

创作场景

11 【HarmonyOS NEXT】 仿 uv-ui 组件开发之 Avatar 组件深度剖析（二）

第二篇：探秘 Avatar 组件的核心实现机制

1. 组件结构设计

2. 状态管理

2.1 组件状态定义

2.2 生命周期处理

3. 核心方法实现

3.1 随机颜色生成

3.2 尺寸计算逻辑

4. 渲染实现

4.1 背景渲染

4.2 内容渲染逻辑

5. 样式处理

6. 性能优化

全栈若城

评论

11 【HarmonyOS NEXT】仿 uv-ui 组件开发之 Avatar 组件深度剖析（二）