HarmonyOS NEXT 头像制作项目系列教程之 --- 头像选择功能实现

项目源码地址

项目源码已发布到GitCode平台, 方便开发者进行下载和使用。 harmonyOSAvatar

项目效果演示

主页面效果如下： 侧边栏效果如下

前言

在HarmonyOS应用开发中，头像选择和编辑是常见的功能需求。本教程将详细介绍如何在HarmonyOS应用中实现头像选择功能，包括数据流管理、组件间通信以及UI渲染等关键技术点。

功能概述

我们将实现的头像选择功能包括以下几个部分：

1. 侧边栏分类列表展示
2. 根据选择的分类动态加载头像列表
3. 使用Swiper组件展示头像选项
4. 点击头像实现预览效果

数据模型设计

首先，我们需要定义几个关键的数据模型：

• ChildItem：侧边栏子项数据模型
• DataBgClass：背景数据模型
• SelePhotoClass：选择的头像数据模型
• PhotoClass：头像数据模型

这些数据模型在common模块中定义，通过导入使用：

import {ChildItem, DataBgClass, SelePhotoClass, PhotoClass, PhotoList} from 'common'

数据流管理

在Index页面中的数据管理

在主页面Index.ets中，我们使用@State和@Provide装饰器来管理状态：

@Provide @Watch('handleSelectedChild') SelectedChild:ChildItem = {
  id:'1664621641821766999', 
  cid:'626d05e010ec0f00014b21f1',
  name: '国庆新款'
}

@State PhotoListData: PhotoClass[] = PhotoList
@State SelePhotoimg: SelePhotoClass[] = []

这里的关键点是：

1. @Provide装饰器使SelectedChild可以被子组件访问
2. @Watch装饰器监听SelectedChild的变化，当变化时调用handleSelectedChild方法
3. PhotoListData存储所有头像数据
4. SelePhotoimg存储当前选中分类下的头像数据

数据过滤与更新

当用户选择不同的分类时，我们需要更新头像列表：

// 获取头像数据
getPhotoList() {
    this.SelePhotoimg = []
    this.PhotoListData.forEach(item => {
        if (item.cid == this.SelectedChild?.id) {
            this.SelePhotoimg.push(new SelePhotoClass(item.id, item.img))
        }
    });
}

handleSelectedChild(val: ChildItem) {
    this.getPhotoList()
}

这个过程包括：

1. 清空当前的头像列表
2. 遍历所有头像数据
3. 根据选中的分类ID筛选头像
4. 将筛选后的头像添加到SelePhotoimg数组中

组件间数据传递

从Index到MainPage的数据传递

在Index页面中，我们将筛选后的头像数据传递给MainPage组件：

MainPage({SelePhotoimg:this.SelePhotoimg, dataBg:this.dataBg})

在MainPage中接收数据

在MainPage组件中，我们使用@Prop装饰器接收传入的数据：

@Component
export struct MainPage {
    @Prop SelePhotoimg: SelePhotoClass[] = []
    @Prop dataBg:DataBgClass
    // ...
}

UI实现

使用Swiper组件展示头像列表

在MainPage组件中，我们使用Swiper组件展示头像列表：

Swiper(this.swiperController) {
    ForEach(this.SelePhotoimg, (item: SelePhotoClass) => {
        Image(item.img)
            .width(80)
            .height(80)
            .backgroundColor('#D3D3D3')
            .objectFit(ImageFit.Fill)
            .borderStyle(BorderStyle.Dashed)
            .borderWidth(1)
            .borderColor('#AFEEEE')
            .borderRadius(10)
            .onClick(() => {
                this.photoImg = item.img
            })
    })
}
.displayCount(3, true)
.autoPlay(true)
.interval(3000)
.loop(true)
.duration(1000)
.itemSpace(10)
.indicator(false)

这里的关键点是：

1. 使用ForEach循环渲染头像列表
2. 为每个头像设置样式和点击事件
3. 点击头像时，更新photoImg变量，实现预览效果
4. 配置Swiper组件的属性，如自动播放、循环等

生命周期管理

在Index组件中，我们使用aboutToAppear生命周期函数初始化数据：

aboutToAppear(): void {
    this.getPhotoList()
}

这确保了组件在首次渲染前已经加载了头像数据。

实现要点总结

1. 数据流管理：使用@State、@Provide和@Watch装饰器管理组件状态和数据流
2. 组件通信：通过属性传递和装饰器实现组件间的数据传递
3. UI渲染：使用ForEach和Swiper组件实现头像列表的动态渲染
4. 事件处理：通过onClick事件实现头像选择功能
5. 生命周期管理：在适当的生命周期函数中初始化数据