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

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

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

1. 基础使用

1.1 组件引入

typescript 复制代码
import { Avatar } from "../../components/Avatar"

1.2 基础示例

typescript 复制代码
// 文字头像
Avatar({ props: { text: '张', randomBgColor: true } })

// 图片头像
Avatar({ props: { src: $r('app.media.default_avatar') } })

// 图标头像
Avatar({ props: { icon: $r('app.media.default_avatar') } })

使用说明:

  1. 文字头像:适合显示用户名首字母或简称
  2. 图片头像:用于展示用户真实头像
  3. 图标头像:适用于默认头像或占位图标

2. 样式定制

2.1 尺寸设置

typescript 复制代码
// 预设尺寸
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 形状设置

typescript 复制代码
// 圆形(默认)
Avatar({ props: { text: 'A', shape: AvatarShape.CIRCLE } })

// 方形
Avatar({ props: { text: 'B', shape: AvatarShape.SQUARE } })

形状说明:

  • CIRCLE:圆形头像,视觉效果柔和
  • SQUARE:方形头像,边角圆润(4px圆角)

2.3 颜色定制

typescript 复制代码
// 随机背景色
Avatar({ props: { text: '随', randomBgColor: true } })

// 自定义背景色
Avatar({ props: { text: '蓝', bgColor: '#1890ff' } })
Avatar({ props: { text: '绿', bgColor: '#52c41a' } })
Avatar({ props: { text: '红', bgColor: '#f5222d' } })

颜色设置说明:

  1. 随机背景色:

    • 从预设颜色池中随机选择
    • 确保视觉效果的一致性
  2. 自定义背景色:

    • 支持品牌色系定制
    • 可配合主题系统使用

3. 布局应用

3.1 Flex布局示例

typescript 复制代码
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 列表应用示例

typescript 复制代码
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 图片加载错误处理

typescript 复制代码
Avatar({
    props: {
        src: 'invalid_image_url',
        onError: () => {
            console.info('Avatar image load failed')
        }
    }
})

错误处理说明:

  1. 自动降级显示默认头像

  2. 触发onError回调函数

  3. 可在回调中进行日志记录或状态更新

下一篇教程将介绍Avatar组件的性能优化和最佳实践,敬请期待!

相关推荐
zhanshuo8 小时前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo8 小时前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu79 小时前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos
jz_ddk9 小时前
[HarmonyOS] 鸿蒙LiteOS-A内核深度解析 —— 面向 IoT 与智能终端的“小而强大”内核
物联网·学习·华为·harmonyos
liuhaikang14 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛1114 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
zhanshuo1 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo1 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7982 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw2 天前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos