当前位置：首页 > article >正文

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

article 2025/3/13 1:26:22

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

文章目录

- 第三篇：掌握Avatar组件的样式魔法与灵活定制
- - 1. 基础使用
  - - 1.1 组件引入
    - 1.2 基础示例
  - 2. 样式定制
  - - 2.1 尺寸设置
    - 2.2 形状设置
    - 2.3 颜色定制
  - 3. 布局应用
  - - 3.1 Flex布局示例
    - 3.2 列表应用示例
  - 4. 错误处理
  - - 4.1 图片加载错误处理

第三篇：掌握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')
        }
    }
})