#我的鸿蒙开发手记#HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏容器组件实现原创

全栈若城

发布于 2025-5-12 09:19

浏览

0收藏

项目源码地址

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

项目效果演示

主页面效果如下：
#我的鸿蒙开发手记#HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏容器组件实现-鸿蒙开发者社区

侧边栏效果如下

#我的鸿蒙开发手记#HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏容器组件实现-鸿蒙开发者社区

1. 概述

本教程详细介绍HarmonyOS应用中侧边栏容器组件（SlideBarList）的实现。侧边栏容器组件负责管理和渲染整个侧边栏的内容，包括数据处理和列表展示，是构建应用侧边栏的核心组件。

2. 组件结构

SlideBarList组件是一个列表容器，主要包含以下部分：

数据处理逻辑：处理和组织侧边栏所需的数据
列表渲染：将处理后的数据渲染为侧边栏列表
样式设置：设置侧边栏的样式和布局

3. 数据模型

SlideBarList组件使用以下数据模型：

// 节日分类数据模型
export class FestivalClass {
   id: string;    // 分类ID
   cid: string;   // 父分类ID
   name: string;  // 分类名称
}

// 节日背景数据模型
export class FestivalBgClass {
  id: string;      // 背景ID
  img: string;     // 背景图片
  name: string;    // 背景名称
  title: string;   // 背景标题
  titleImg: string; // 标题图片
  hasSele: boolean; // 是否被选中
}

// 组合数据接口
export interface dataSourceInterface {
  id: string;        // 数据ID
  img: string;       // 图片路径
  name: string;      // 名称
  title: string;     // 标题
  titleImg: string;  // 标题图片
  hasSele: boolean;  // 是否被选中
  children: ChildItem[]; // 子项列表
}

4. 组件实现

4.1 组件定义

@Component
export struct SlideBarList{
    @State dataSource: dataSourceInterface[] = [] // 处理过后的数据源
    @State festivalData: FestivalClass[] = festivalList // 节日分类数据源
    @State FestivalBgData: FestivalBgClass[] = FestivalBgList // 节日背景数据源
}

4.2 数据处理逻辑

SlideBarList组件在初始化时，通过dataTreating()方法处理数据，将一级列表和二级列表的数据关联起来：

dataTreating() {
    let nowData: dataSourceInterface[] = []
    //  遍历一级列表数据
    this.FestivalBgData.forEach(item => {
        nowData = [{
            id: item.id,
            img: item.img,
            name: item.name,
            title: item.title,
            titleImg: item.titleImg,
            hasSele:item.hasSele,
            children:[]
        }]
        //  遍历二级列表数据
        this.festivalData.forEach(itemB => {
            if (item.id == itemB.cid) {
                nowData[0].children.push(
                    {
                        id: itemB.id,
                        cid: itemB.cid,
                        name: itemB.name
                    }
                )
            }
        });
        // 将数据添加到 dataSource 中
        this.dataSource.push(...nowData)
    });
}

数据处理的核心逻辑是：

遍历FestivalBgData（一级列表数据）
为每个一级列表项创建一个新的数据对象，包含空的children数组
遍历festivalData（二级列表数据），查找cid与一级列表项id匹配的项
将匹配的二级列表项添加到对应一级列表项的children数组中
将处理好的数据添加到dataSource中

4.3 生命周期管理

组件在aboutToAppear生命周期中调用数据处理方法：

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

4.4 列表渲染

组件使用ArkUI的List和ForEach组件渲染侧边栏列表：

build() {
    Column(){
        List(){
            ForEach(this.dataSource,(item: dataSourceInterface , index )=>{
                    ListItem(){
                        SlideBarItem({
                            SildeItem:item
                        })
                    }
            })
        }
        .width('90%')
        .height('90%')
        .alignListItem(ListItemAlign.Center)
        .borderRadius(20)
        .divider({strokeWidth:'1px', color:'#eaf0ef'})
        .scrollBar(BarState.Off)
    }.width('100%')
     .justifyContent(FlexAlign.Center)
     .alignItems(HorizontalAlign.Center)
     .height('100%')
}

5. 样式与布局

组件使用了以下样式和布局设计：

外层容器：使用Column组件，设置宽高为100%，内容居中对齐
列表容器：使用List组件，设置宽高为90%，添加圆角和分割线
列表项：使用ListItem组件，内部包含SlideBarItem组件
滚动条：通过scrollBar(BarState.Off)隐藏滚动条

6. 数据关联逻辑

SlideBarList组件实现了复杂的数据关联逻辑：

一级与二级数据关联：通过FestivalBgClass中的id与FestivalClass中的cid建立关联
二级与三级数据关联：注释中提到，FestivalClass中的id可以用于查找PhotoClass中的cid，作为头像装饰的选择（这部分逻辑可能在其他组件中实现）