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

简介

本教程将详细介绍如何使用HarmonyOS的ArkTS和ArkUI框架实现一个功能完整的侧边栏组件。侧边栏组件是移动应用中常见的导航元素，可以提供多级菜单导航功能，增强用户体验。我们将通过分析代码结构、UI布局和交互逻辑，帮助你理解如何构建类似的组件。

项目源码地址

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

项目效果演示

主页面效果如下：

侧边栏效果如下

整体结构设计

我们的侧边栏组件主要由以下几个部分组成：

侧边栏项目组件(SlideBarItem)：单个菜单项的实现，包含一级菜单和可展开的二级菜单
侧边栏列表组件(SlideBarList)：整个侧边栏的容器，管理多个菜单项
交互逻辑：处理菜单项的点击、展开/收起二级菜单等交互行为

整个组件使用了HarmonyOS的组件化开发方式，充分利用了ArkUI的声明式UI开发范式。

侧边栏项目组件实现

侧边栏项目组件(SlideBarItem)是侧边栏的基本构建单元，每个项目包含一个一级菜单和可选的二级菜单列表。

组件结构

@Component
export struct SlideBarItem {
    @State hasDown: boolean = false

    build() {
        Column() {
            // 一级菜单项
            ComposeListItem({
                contentItem: {
                    primaryText: '这是标题',
                },
                operateItem: {
                    icon: { value: $r('app.media.right') }
                }
            })
                .onClick(() => {
                    this.hasDown = !this.hasDown // 切换二级菜单展示状态
                })
            
            // 二级菜单内容
            if (this.hasDown) {
                // 二级菜单实现...
            }
        }.margin({ top: 30 })
    }
}

这段代码定义了一个侧边栏项目组件，使用@Component装饰器标记为组件，并使用@State装饰器定义了一个状态变量hasDown，用于控制二级菜单的显示状态。

一级菜单实现

一级菜单使用ComposeListItem组件实现，这是HarmonyOS提供的复合列表项组件，可以方便地创建包含主文本和操作图标的列表项。

ComposeListItem({
    contentItem: {
        primaryText: '这是标题',
    },
    operateItem: {
        icon: { value: $r('app.media.right') }
    }
})
.onClick(() => {
    this.hasDown = !this.hasDown // 切换二级菜单展示状态
})

这段代码创建了一个带有标题文本和右箭头图标的列表项，并为其添加了点击事件处理函数，用于切换二级菜单的显示状态。

二级菜单交互实现

二级菜单的显示和隐藏是通过条件渲染实现的，当hasDown为true时显示二级菜单，否则隐藏。

// 二级菜单内容
if (this.hasDown) {
    List() {
        ForEach(['二级数据一', '二级数据二'], (item: string) => {
            ListItem() {
                ComposeListItem({
                    contentItem: {
                        secondaryText: item
                    }
                })
            }.onClick(() => {
                // 二级菜单点击事件
            })
            .borderRadius(8)
            .margin({ top: 4 })
        })
    }
    .borderRadius(12)
    .margin({ top: 8 })
}

这段代码使用List和ForEach组件创建了一个二级菜单列表，每个列表项都是一个ComposeListItem组件，并为其添加了点击事件处理函数和样式设置。

侧边栏列表组件实现

侧边栏列表组件(SlideBarList)是整个侧边栏的容器，用于管理多个侧边栏项目。

组件结构

@Component
export struct SliderBarList {
    build() {
        Column() {
            List() {
                ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], (item: number) => {
                    ListItem() {
                        SlideBarItem()
                    }
                })
            }
            .width('90%')
            .height('90%')
            .alignListItem(ListItemAlign.Center)
            .borderRadius(20)
            .divider({ strokeWidth: '1px', color: 0xeaf0ef })
            .scrollBar(BarState.Off)
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .height('100%')
    }
}

这段代码定义了一个侧边栏列表组件，使用@Component装饰器标记为组件。在build方法中，使用Column、List和ForEach组件创建了一个包含多个侧边栏项目的列表。

列表样式设置

侧边栏列表的样式通过链式调用设置：

.width('90%')
.height('90%')
.alignListItem(ListItemAlign.Center)
.borderRadius(20)
.divider({ strokeWidth: '1px', color: 0xeaf0ef })
.scrollBar(BarState.Off)

这段代码设置了列表的宽度、高度、对齐方式、圆角、分割线和滚动条样式。

与SideBarContainer的集成

侧边栏组件通常与SideBarContainer组件一起使用，SideBarContainer提供了侧边栏的基本容器和滑动交互功能。

@Entry
@Component
struct Index {
    @Provide showSlideBar: boolean = false
    build() {
        SideBarContainer(SideBarContainerType.Overlay) {
            // 侧边栏内容
            SliderBarList()
            
            // 主内容区域
            Column() {
                // 主内容...
            }
            .width('100%')
            .height('100%')
        }
        .showSideBar(this.showSlideBar)
        .onChange((isShow: boolean) => {
            this.showSlideBar = isShow
        })
    }
}

在这个例子中，SliderBarList组件被作为SideBarContainer的第一个子组件，成为侧边栏的内容。SideBarContainer的showSideBar属性控制侧边栏的显示状态，onChange事件处理函数用于更新状态变量。

完整代码解析

状态管理

@State hasDown: boolean = false  // 控制二级菜单的显示状态

这里使用了ArkTS的@State装饰器来定义组件的状态变量，当这个变量发生变化时，UI会自动更新。

组件通信

侧边栏组件的层次结构如下：

Index组件：应用的入口组件，包含SideBarContainer
SideBarContainer：侧边栏容器，包含SliderBarList和主内容区域
SliderBarList：侧边栏列表，包含多个SlideBarItem
SlideBarItem：侧边栏项目，包含一级菜单和二级菜单

组件之间的通信可以通过以下方式实现：

@State：组件内部状态管理
@Prop：父组件向子组件传递数据
@Link：双向数据绑定
@Provide/@Consume：跨组件数据共享

总结

通过本教程，我们学习了如何使用HarmonyOS的ArkTS和ArkUI框架实现一个功能完整的侧边栏组件。关键点包括：

使用ComposeListItem组件实现菜单项
使用条件渲染实现二级菜单的显示和隐藏
使用List和ForEach组件创建动态列表
使用@State装饰器管理组件状态
与SideBarContainer组件集成实现完整的侧边栏功能

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