# ExpandableList_ArkUI

**Repository Path**: jerryzcx/expandable-list

## Basic Information

- **Project Name**: ExpandableList_ArkUI
- **Description**: ExpandableList 可折叠列表组件，或者叫二级列表组件、手风琴组件、折叠面板组件，ArkUI封装实现。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-14
- **Last Updated**: 2025-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ExpandableList 可折叠列表组件

## 介绍
ExpandableList
可折叠列表组件，或者叫二级列表组件、手风琴组件、折叠面板组件，ArkUI封装实现。

关联词：ExpandableListView、accordion、fold

## 效果图

![](screenshot/p.jpg)

## 特性
- 支持同时仅展开一个group 或 同时展开多个group
- 支持自定义group和child界面
- 默认自带展开和关闭动画
- 展开后的child可自定义类型，支持List或Grid风格（业务层自行设置width比例实现）

## 安装

```
ohpm install @zj/expandablelist
```

## 使用说明

1、引入依赖

```
import { ChildDataModel, ExpandableList, GroupDataModel } from 'expandablelist';
```

2、设计数据结构，加载数据。 （使用content扩展业务字段，例如content: '父标题0'或 content: { title: '子标题0', type: 0 }）

```
export class GroupDataModel {
  isExpanded: boolean = false; // 表示当前group是否已展开
  children?: ChildDataModel[] | null = null;
  content: ESObject | string = ''; // 业务扩展字段
}

export class ChildDataModel {
  content: ESObject | string = ''; // 业务扩展字段
}

aboutaToAppear(): void {
    this.listData = [
      {
        isExpanded: true,
        content: '父标题0',
        children: [
          {
            content: { title: '子标题0', type: 0 },
          },
          {
            content: { title: '子标题1', type: 0 },
          }
        ]
      }]
  }
```

3、自定义group和child界面

```
@Builder
groupViewBuilder(groupItem: GroupDataModel, groupIndex: number, groupCount: number) {
  Row() {
    Text(groupItem.content)
      .fontSize(16)
      .fontWeight(FontWeight.Bold)
  }.width('100%')
}

@Builder
childViewBuilder(childItem: ChildDataModel, childIndex: number, childCount: number,
    groupIndex: number, groupCount: number) {
    ...
  }
```

4、实现ExpandableList , 其中isExpandUnique控制同时展开一个group 或 展开多个

```
ExpandableList({
        mData: this.listData,
        groupViewBuilder: this.groupViewBuilder,
        childViewBuilder: this.childViewBuilder,
        isExpandUnique: this.isExpandUnique
      })
```

## 其他