
回复
项目源码已发布到GitCode平台, 方便开发者进行下载和使用。
harmonyOSAvatar
主页面效果如下:
侧边栏效果如下
在HarmonyOS应用开发中,头像选择和编辑是常见的功能需求。本教程将详细介绍如何在HarmonyOS应用中实现头像选择功能,包括数据流管理、组件间通信以及UI渲染等关键技术点。
我们将实现的头像选择功能包括以下几个部分:
首先,我们需要定义几个关键的数据模型:
ChildItem
:侧边栏子项数据模型DataBgClass
:背景数据模型SelePhotoClass
:选择的头像数据模型PhotoClass
:头像数据模型这些数据模型在common
模块中定义,通过导入使用:
import {ChildItem, DataBgClass, SelePhotoClass, PhotoClass, PhotoList} from 'common'
在主页面Index.ets
中,我们使用@State
和@Provide
装饰器来管理状态:
@Provide @Watch('handleSelectedChild') SelectedChild:ChildItem = {
id:'1664621641821766999',
cid:'626d05e010ec0f00014b21f1',
name: '国庆新款'
}
@State PhotoListData: PhotoClass[] = PhotoList
@State SelePhotoimg: SelePhotoClass[] = []
这里的关键点是:
@Provide
装饰器使SelectedChild
可以被子组件访问@Watch
装饰器监听SelectedChild
的变化,当变化时调用handleSelectedChild
方法PhotoListData
存储所有头像数据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()
}
这个过程包括:
SelePhotoimg
数组中在Index页面中,我们将筛选后的头像数据传递给MainPage组件:
MainPage({SelePhotoimg:this.SelePhotoimg, dataBg:this.dataBg})
在MainPage组件中,我们使用@Prop
装饰器接收传入的数据:
@Component
export struct MainPage {
@Prop SelePhotoimg: SelePhotoClass[] = []
@Prop dataBg:DataBgClass
// ...
}
在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)
这里的关键点是:
ForEach
循环渲染头像列表photoImg
变量,实现预览效果在Index组件中,我们使用aboutToAppear
生命周期函数初始化数据:
aboutToAppear(): void {
this.getPhotoList()
}
这确保了组件在首次渲染前已经加载了头像数据。
@State
、@Provide
和@Watch
装饰器管理组件状态和数据流ForEach
和Swiper组件实现头像列表的动态渲染onClick
事件实现头像选择功能