HarmonyOS 列表收缩与展开的案例？

Question

默认收起部分列表内容，点击后展开全部内容

Answer 1

参考以下代码：

@Entry
@Component
struct Wrap {
  @State message: string = 'Hello World';
  @State arr:Array<string> = ['1','2','3','4','5','6','7']
  @State isExpanded:boolean = false
  build() {
    Column() {
      Button('展开和收缩').onClick(()=>{
        this.isExpanded = !this.isExpanded
      })
      Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween}) {
        ForEach(this.arr, (item: string,index:number) => {
          // Row(){
          Text(item)
            .width('50%')
            .height(50)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .alignSelf(ItemAlign.Center)
              // .border({width:1})
            .visibility(index>=4&&this.isExpanded || index<4 ?Visibility.Visible:Visibility.None)
          // }
        }, (item: string) => item.toString())
      }
    }
  }
}