HarmonyOS NEXT 头像制作项目系列教程之 --- 侧边栏项目组件设计

项目源码地址

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

项目效果演示

主页面效果如下：

侧边栏效果如下

1. 概述

本教程详细介绍HarmonyOS应用中侧边栏项目组件（SlideBarItem）的实现。侧边栏项目组件是构建应用侧边栏的基础单元，负责展示主菜单项和对应的二级菜单，并处理用户交互逻辑。

2. 组件结构

SlideBarItem组件是一个可折叠的列表项，包含以下主要部分：

1. 主菜单：显示一级菜单项，点击后可展开或收起二级菜单
2. 二级菜单：当主菜单被点击展开后，显示相关的子菜单项列表

3. 数据模型

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

// 子项数据接口
export interface ChildItem {
  id: string;    // 子项ID
  cid: string;   // 分类ID
  name: string;  // 子项名称
}

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

// 背景数据类
export class DataBgClass {
  id: string;
  img: string;
  name: string;
  title: string;
  titleImg: string;
  
  constructor(id: string, img: string, name: string, title: string, titleImg: string) {
    this.id = id;
    this.img = img;
    this.name = name;
    this.title = title;
    this.titleImg = titleImg;
  }
}

4. 组件实现

4.1 组件定义

@Component
export struct SlideBarItem {
    @ObjectLink SildeItem: dataSourceClass;  // 数据源，使用ObjectLink装饰器实现双向绑定
    @State hasDown: boolean = false          // 控制二级菜单的展开/收起状态
    @State SelectedChild: ChildItem = {id:'id',cid:'cid',name:'name'} // 当前选中的子项
    @State showSideBar: boolean = false      // 控制侧边栏的显示/隐藏
    @State dataBg: DataBgClass = new DataBgClass('','','','','') // 背景数据
}

4.2 主菜单实现

主菜单使用ArkUI高级组件ComposeListItem实现，提供了更丰富的列表项布局：

ComposeListItem({
    contentItem: {
        primaryText: this.SildeItem.name  // 显示菜单项名称
    },
    operateItem: {
        icon: { value: $r('app.media.right') }  // 右侧箭头图标
    }
})
.onClick(() => {
    this.hasDown = !this.hasDown  // 点击切换展开/收起状态
})

4.3 二级菜单实现

二级菜单使用条件渲染和List组件实现：

if (this.hasDown){
    List(){
        ForEach(this.SildeItem.children,(item:ChildItem)=>{
        ListItem(){
            ComposeListItem({
                contentItem: { secondaryText: item.name }
            })
        }.onClick(()=>{
            this.SelectedChild = item;
            this.showSideBar = false; // 关闭侧边栏
            this.updateDataBg(); // 提取数据更新逻辑
        })
         .borderRadius(8)
         .margin({top:4})
        })
    }
}

4.4 数据更新逻辑

当用户选择二级菜单项时，组件会更新背景数据：

private updateDataBg() {
    this.dataBg = new DataBgClass(
        this.SildeItem.id,
        this.SildeItem.img,
        this.SildeItem.name,
        this.SildeItem.title,
        this.SildeItem.titleImg
    );
}

5. 样式与交互

组件使用了以下样式和交互设计：

1. 主菜单项使用ComposeListItem实现，提供了标准的列表项布局
2. 二级菜单项添加了圆角和上边距，提升视觉层次感
3. 点击主菜单项时，通过切换hasDown状态控制二级菜单的展开/收起
4. 点击二级菜单项时，更新选中状态并关闭侧边栏

6. 使用示例

在父组件中使用SlideBarItem：

SlideBarItem({
    SildeItem: dataItem  // 传入数据项
})

7. 最佳实践

1. 数据分离：将数据模型与UI组件分离，便于维护和扩展
2. 状态管理：使用@State和@ObjectLink装饰器管理组件状态
3. 条件渲染：使用条件渲染实现二级菜单的动态显示/隐藏
4. 事件处理：为菜单项添加点击事件处理逻辑
5. 组件封装：将相关逻辑封装在独立方法中，如updateDataBg()

8. 总结

SlideBarItem组件是构建HarmonyOS应用侧边栏的基础单元，通过合理的组件设计和数据管理，实现了可折叠的多级菜单结构。开发者可以基于此组件快速构建功能丰富的应用侧边栏。