HarmonyOS 列表联动交互

参考demo：

@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  scroller: Scroller = new Scroller()
  @State isTogether: boolean = true
  build() {
    if (this.isTogether) {
      this.item2()
    } else {
      Stack({alignContent:Alignment.Bottom}) {
        this.item2()
        this.item1()
      }
    }
  }

  //实际项目中抽象成独立的组件
  @Builder
  item1() {
    Scroll(this.scroller) {
      Column() {
        //为了滑动效果做的占位组件
        if (!this.isTogether) {
          Column()
            .width("100%")
            .height("80%")
            .onClick(() => {
              this.isTogether = true
            })

        }
        Button(`button `)
          .borderWidth(2)
          .backgroundColor(Color.Orange)
          .width("100%")
          .height(100)
          .onClick(() => {
            this.isTogether = false
          })
        //为了滑动效果做的占位组件
        if (!this.isTogether) {
          Column()
            .height("80%")
        }
      }
      .width('100%')

    }
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.Off)

  }

  //实际项目中抽象成独立的组件
  @Builder
  item2() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          //当item是6的时候现实不同的组件
          if (item == 6) {
            if (this.isTogether) {
              this.item1()
            }
          } else {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
              .onClick(() => {
                this.isTogether = true;
              })
          }
        }
      }, (item: string) => item)
    }
    .listDirection(Axis.Vertical) // 排列方向
    .scrollBar(BarState.Off)
    .friction(0.6)
    .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
    .width('100%')
  }
}