HarmonyOS鸿蒙Next中列表分组可折叠和展开

参考以下示例

class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = [];
private originDataArray: string[] = [];

public totalCount(): number {
return 0;
}

public getData(index: number): string {
return this.originDataArray[index];
}

// 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
console.info('add listener');
this.listeners.push(listener);
}
}

// 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener);
if (pos >= 0) {
console.info('remove listener');
this.listeners.splice(pos, 1);
}
}

// 通知LazyForEach组件需要在index对应索引处添加子组件
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdd(index);
})
}
}

class MyDataSource extends BasicDataSource {
dataArray: string[] = [];

public totalCount(): number {
return this.dataArray.length;
}

public pushData(data: string): void {
this.dataArray.push(data);
this.notifyDataAdd(this.dataArray.length - 1);
}
}

@Entry
@Component
struct Index {
private titleList: number[] = [1,2,3,4,5,6,7,8]
@State condition1: boolean = true
@State conditionList: boolean[] = [true, true, true, true, true, true, true, true]
private data: MyDataSource = new MyDataSource();

aboutToAppear() {
for (let i = 0; i <= 10; i++) {
this.data.pushData("Hello"+i)
}
}

build() {
Column() {
List({ space: 50 }) {
ForEach(this.titleList, (item: string, index: number) => {
ListItem() {
Column() {
Text("标题"+item)
.fontSize(35)
.fontColor(Color.Red)
.height('40vp')
.width("100%")
.backgroundColor(Color.Grey)
.textAlign(TextAlign.Center)
.onClick(() => {
if (this.conditionList[index]) {
this.conditionList[index] = false
} else {
this.conditionList[index] = true
}
})
if (this.conditionList[index]) {
List({ space: 10 }) {
LazyForEach(this.data, (item: string, index: number) => {
ListItem() {
Row() {
Text("内容："+item)
.fontSize(10)
.fontColor(Color.Green)
.height('15vp')
.width("100%")
.backgroundColor(Color.Yellow)
}
}
}, (item: string) => item)
}
}
}
}
}, (item: string) => item)
}
}
}