HarmonyOS 半模态框多次弹出？

Question

List{
  ForEach([], (item: number, index: number) => {
    ListItem() {
      // 组件
      // 给组件绑定一个半模态框
    }
  }
}

这个模态框在被触发时，多次弹出

Answer 1

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5\#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84

Demo如下：

@Component
struct ViewA {
  @State sheetHeight: number = 300;
  // 子组件ViewA的@ObjectLink的类型是ClassA
  @ObjectLink a: ClassA;
  label: string = 'ViewA1';
  @Builder
  myBuilder() {
    Column() {
      Text(''+ this.a.c)
      Button('change height')
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = 500;
        })

      Button('Set Illegal height')
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = 0;
        })
    }
    .width('100%')
    .height('100%')
  }
  build() {
    Row() {
      Button(`ViewA this.a.c = ${this.a ? this.a.c : "undefined"}`)
        .width(320)
        .margin(10)
        .onClick(() => {
          this.a.isShow = !this.a.isShow;
          console.log("22222",JSON.stringify(this.a))
        })
        .bindSheet(this.a.isShow, this.myBuilder(), { height: this.sheetHeight, backgroundColor: Color.Green })
    }
  }
}
@Entry
@Component
struct ViewB {
  // ViewB中有@State装饰的ClassA[]
  @State arrA: ClassA[] = [new ClassA(4), new ClassA(5)];

  build() {
    Column() {
      List({ space: 12, initialIndex: 0 }) {
        ForEach(this.arrA, (item:ClassA,index:number)=>{
          ListItem() {
            ViewA({ label: `#${item.id}`, a: item })
          }

        },(item: ClassA): string => item.id.toString())
      }
    }
  }
}