HarmonyOS list折叠展开代码如下，想要点击的时候list可以展开，也可以折叠带动画

@Observed
export class CourseWeek {
  weekName?: string
  open?: boolean
  chapters?: ObservedArray<Chapter>
}

@Observed
export class Chapter {
  preface?: string
  title?: string
  subTitle?: string
  videoList?: ObservedArray<SpecialItemNode>
}

@Observed
export class SpecialItemNode {
  videoId?: string
  name?: string
  coverUrl?: string
  tipMessage?: string
  canView?: string
  contentUrl?: string
}

build() {
  Column() {
    Row() {
      Text(this.item.weekName ?? '')
        .fontSize(17)
        .fontColor(!this.item.open ? '#333333' : Color.White)
        .fontWeight(FontWeight.Medium)
      Blank()
      Image(this.item.open ? $r('app.media.special_collapse_icon') : $r('app.media.special_expand_icon'))
        .width(16)
        .height(16)
    }
    .width('100%')
    .height(64)
    .borderRadius(6)
    .padding({ left: 17, right: 18 })
    .linearGradient({
      direction: GradientDirection.Right,
      colors: [[!this.item.open ? Color.White : '#6F749F', 0.0], [!this.item.open ? Color.White : '#3B4066', 1]]
    })
    .onClick(() => {
      this.item.open = !this.item.open
    })

    if (this.item.open) {
      List({
        space: 3,
      }) {
        ForEach(this.item.chapters, (item: Chapter, index: number) => {
          ListItem() {
            Column() {
              Row() {
                Text(item.preface ?? '')
                  .fontSize(13)
                  .fontColor('#333333')
                  .fontWeight(FontWeight.Medium)
                  .margin({ top: 8 })
              }
            }
          }
        })
      }
    }
  }
  .backgroundColor(Color.White)
  .alignItems(HorizontalAlign.Start)
  .borderRadius(6)
  .width('100%')
  .shadow({ radius: 10, color: '#4F424668' })
}

HarmonyOS

Excelsior_abit

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

请参考以下示例或者参考社区贴：https://ost.51cto.com/posts/26004

@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)
  }
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS list折叠展开代码如下，想要点击的时候list可以展开，也可以折叠带动画

订阅鸿蒙技术特刊，精选内容抢先看