HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏容器组件实现

项目源码地址

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

项目效果演示

主页面效果如下：

侧边栏效果如下

1. 概述

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

2. 组件结构

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

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

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)
    });
}

数据处理的核心逻辑是：

1. 遍历FestivalBgData（一级列表数据）
2. 为每个一级列表项创建一个新的数据对象，包含空的children数组
3. 遍历festivalData（二级列表数据），查找cid与一级列表项id匹配的项
4. 将匹配的二级列表项添加到对应一级列表项的children数组中
5. 将处理好的数据添加到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. 样式与布局

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

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

6. 数据关联逻辑

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

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

这种多级数据关联设计使得应用能够灵活地组织和展示不同类别的内容。

7. 使用示例

在页面中使用SlideBarList组件：

SlideBarList()

由于SlideBarList组件内部已经包含了数据处理和渲染逻辑，使用时不需要传入额外的参数。

8. 最佳实践

1. 数据预处理：在组件初始化时处理数据，避免在渲染过程中进行复杂计算
2. 组件分离：将列表容器和列表项分离为独立组件，提高代码复用性
3. 状态管理：使用@State装饰器管理组件内部状态
4. 样式封装：将样式设置封装在组件内部，保持使用接口的简洁
5. 数据关联：通过ID关联不同层级的数据，实现灵活的数据组织

9. 总结

SlideBarList组件是构建HarmonyOS应用侧边栏的核心容器组件，通过合理的数据处理和列表渲染，实现了功能完善的侧边栏。开发者可以基于此组件快速构建具有多级菜单结构的应用侧边栏。