HarmonyOS List如何支持折叠与展开？

Question

出现父Item 覆盖 子Item，好像是没在一个层级，我应该如何处理，

//父布局Item
@Preview
@Component
export struct CellUncomingScheduleItemView {
  @ObjectLink item: UncomingScheduleBean
  isMoreSelcet:Resource = $r('app.media.schedule_icon_compile_arrows_down')
  isMoreNor:Resource = $r('app.media.schedule_icon_compile_arrows')

  build() {
    Column(){
      Row(){
        Image(this.item.leftRes)
          .height(18)
          .width(18)

        Text(this.item.content)
          .maxLines(1)
          .ellipsisMode(EllipsisMode.END)
          .textOverflow({overflow:TextOverflow.Ellipsis})
          .margin({left:18})
          .fontSize(16)
          .fontColor($r('app.color.a2_font_main'))

        Text()
          .width(8)
          .height(8)
          .borderRadius(5)
          .backgroundColor($r('app.color.a10_font_delete_overdue'))
          .margin({left:-1})
          .visibility(this.item.isShowRed?Visibility.Visible:Visibility.None)
        Text()
          .layoutWeight(1)
        Image(this.item.isMoreSelect?this.isMoreSelcet:this.isMoreNor)
          .margin({right:20})
          .fitOriginalSize(true)
          .visibility(this.item.isMoreShow?Visibility.Visible:Visibility.Hidden)
      }
      if (this.item.isMoreSelect){
        ForEach(this.item.childBean.scheduleTags,(childItem: ScheduleTagModel, index: number)=>{
          Column(){
            CellUncomingScheduleTagItem({
              item:childItem
            })
              .onClick(()=>{
                childItem.title = index.toString()
              })
          }
        }, (childItem: ScheduleTagModel, index: number): string => childItem.addTime?.toString() + index.toString())
      }

    }
    .justifyContent(FlexAlign.Center)
    .height(48)
    .width("100%")
  }
}

//子布局
@Preview
@Component
export struct CellUncomingScheduleTagItem {
  @ObjectLink item: ScheduleTagModel

  build() {
    Row(){
      this.ImageView()
      Text(this.item.title)
        .maxLines(1)
        .textOverflow({overflow:TextOverflow.Ellipsis})
        .ellipsisMode(EllipsisMode.END)
        .fontSize(16)
        .margin({left:18,right:15})
        .layoutWeight(1)
        .fontColor($r('app.color.a2_font_main'))
      //此处头像，直接传递数值，进行渲染即可。
      List({
        initialIndex:0
      }){
        ForEach(this.item.mList,(item: number, index: number)=>{

          ListItem(){
            if (index == 0) {
              Image($r('app.media.home_more_icon_administrator'))
                .width(20)
                .height(20)
                .margin({left:0})
            }else{
              Image($r('app.media.home_more_icon_administrator'))
                .width(20)
                .height(20)
                .margin({left:-5})
            }
          }
        })
      }
      .listDirection(Axis.Horizontal)
      Image(this.item.isCheck?$r('app.media.todo_icon_todo_sele'):$r('app.media.todo_icon_todo_nor'))
        .width(20)
        .height(20)
        .margin({right:20})
        .visibility(this.item.isShowCheck?Visibility.Visible:Visibility.None)
    }
    .padding({top:10,bottom:10})
  }

  @Builder
  ImageView() {
    RelativeContainer() {
      Image(this.item.imgLogo)
        .fitOriginalSize(true)
        .width(20)
        .height(20)
        .alignRules({
          bottom:{
            anchor:'__container__',
            align:VerticalAlign.Bottom
          },
          right:{
            anchor:'__container__',
            align:HorizontalAlign.End
          },
          top:{
            anchor:'__container__',
            align:VerticalAlign.Top
          },
          left:{
            anchor:'__container__',
            align:HorizontalAlign.Start
          }
        })

      Image($r('app.media.home_more_icon_administrator'))
        .fitOriginalSize(true)
        .alignRules({
          bottom:{
            anchor:'__container__',
            align:VerticalAlign.Bottom
          },
          right:{
            anchor:'__container__',
            align:HorizontalAlign.End
          }
        })
        .visibility(this.item.isShowCollaboration?Visibility.Visible:Visibility.None)

    }
    .width(20)
    .height(20)
  }
}

Answer 1

可参考以下demo

@Entry
@Component
struct ListCollapseExpand {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6];
  @State isContentShow: boolean = true;
  @State selectItem: number = 0;

  build() {
    Column() {
      List({ initialIndex: 0 }) {
        ForEach(this.arr, (item: number, index: number) => {
          ListItem() {
            Column() {
              Row() {
                Text(item.toString())
                Button(this.isContentShow && this.selectItem === item ? '收起' : '展开')
                  .onClick(() => {
                    animateTo({
                      duration: 300,
                      onFinish: () => {
                        console.info('animation end');
                      }
                    }, () => {
                      this.isContentShow = !this.isContentShow;
                      this.selectItem = item;
                    })
                  })
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)

              if (this.isContentShow && this.selectItem === item) {
                Text('这是内容区域')
                  .backgroundColor(Color.Gray)
                  .width('100%')
                  .height(100)
              }
            }
            .backgroundColor(0xFFFFFF)
            .width('100%')
            .padding({
              top: 12,
              bottom: 12
            })
            .margin({ top: 10 })
          }
        }, (item: string) => item.toString())
      }
      .scrollBar(BarState.Off)
      .height('100%')
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .padding(12)
  }
}