# MultiLevelNestingList

**Repository Path**: scenario-samples/multi-level-nesting-list

## Basic Information

- **Project Name**: MultiLevelNestingList
- **Description**: 【鸿蒙 Harmony Next 示例 代码】多层级嵌套企业通讯录是综合办公类应用中的高频使用场景之一，如用户在发送通知、邮件时，从企业通讯录中选择部门批量发送。 本示例基于递归自定义组件和组件状态管理实现多层级嵌套的企业通讯录模型。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-06-23
- **Last Updated**: 2025-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多层级嵌套企业通讯录

## 介绍

多层级嵌套企业通讯录是综合办公类应用中的高频使用场景之一，如用户在发送通知、邮件时，从企业通讯录中选择部门批量发送。
本示例基于递归自定义组件和组件状态管理实现多层级嵌套的企业通讯录模型。

## 效果预览

<img src="./screenshots/multi_level_nesting_list.gif" width="200">

## 约束与限制

- 本示例支持API Version 17 Release及以上版本。
- 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

## 使用说明

无

## 实现思路

通过@Observed和@ObjectLink监听数据状态变化，通过自定义组件和@Builder递归，实现多层级嵌套。

```
@Observed
class Node {
  ...
}

@Component
export struct NodeItem {
  @ObjectLink item: Node;
  ...
  build() {
    Column() {
      ...
      if (this.item.children.length > 0 && this.isExpand) {
        this.expandChildItem();
      }
    }
  }

  @Builder
  expandChildItem() {
    List({ scroller: this.scroller }) {
      ForEach(this.item.children, (subItem: Node, index: number) => {
        ListItem() {
          NodeItem({
            item: subItem,
            ...
          })
        }
      }, (subItem: Node) => subItem.id + subItem.name)
    }
  }
```

## 工程目录

```
├──entry/src/main/ets                 // 代码区
│  ├──components
│  │  ├──NodeItem.ets                 // 自定义节点组件
│  │  └──SearchBox.ets                // 自定义搜索框
│  ├──entryability
│  │  └──EntryAbility.ets  
│  ├──entrybackupability
│  │  └──EntryBackupAbility.ets  
│  ├──pages
│  │  └──Index.ets                    // 部门联系人主页面
│  └──utils
│     ├──Logger.ets                   // 日志系统封装
│     ├──MockData.ets                 // 模拟数据
│     └──Node.ets                     // 节点类型定义
└──entry/src/main/resources           // 资源目录
```

## 参考文档

[@Builder装饰器：自定义构建函数](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builder)

[@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">