HarmonyOS popup组件在页面内容切换后发生偏移

interface dataItem {
  title: string;
  price: number;
  price2: number;
}

@Entry
@Component
struct Index {
  @State dataSource: Array<dataItem> = [
    { title: 'AAAAAA', price: 100, price2: 111 },
    { title: 'BBBBBB', price: 299, price2: 398 }
  ];
  @State index: number = 0;
  @State qty: number = 0;
  @State qty2: number = 0;
  @State total: number = 0;
  @State total2: number = 0;
  @State showModal: boolean = false;
  @State showPopup: boolean = false;
  @State showPopup2: boolean = false;

  handleClick(type: string) {
    if (type === 'minus' && this.qty > 0) {
      this.qty -= 1;
      this.total = this.qty * this.dataSource[this.index].price;
      this.showPopup = this.qty > 0;
    } else if (type === 'add') {
      this.qty += 1;
      this.total = this.qty * this.dataSource[this.index].price;
      this.showPopup = this.qty > 0;
    }
  }

  handleClick2(type: string) {
    if (type === 'minus' && this.qty2 > 0) {
      this.qty2 -= 1;
      this.total2 = this.qty2 * this.dataSource[this.index].price2;
      this.showPopup2 = this.qty2 > 0;
    } else if (type === 'add') {
      this.qty2 += 1;
      this.total2 = this.qty2 * this.dataSource[this.index].price2;
      this.showPopup2 = this.qty2 > 0;
    }
  }

  @Builder
  modalBuilder() {
    Column() {
      ForEach(this.dataSource, (item: dataItem, index: number) => {
        Text(item.title)
          .width('90%')
          .height(50)
          .textAlign(TextAlign.Center)
          .border({ width: 1 })
          .margin({ bottom: 10 })
          .onClick(() => {
            this.index = index;
            this.total = this.qty * this.dataSource[this.index].price;
            this.total2 = this.qty2 * this.dataSource[this.index].price2;
            this.showModal = false;
          })
      }, (item: dataItem, index: number) => {
        return item.title;
      })
    }
    .padding({ top: 100 })
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  @Builder
  popupBuilder(type: number) {
    Column() {
      Text(String(type === 1 ? this.total : this.total2))
        .fontSize(11)
        .fontColor(Color.White)
        .padding({
          top: 1,
          bottom: 1,
          left: 12,
          right: 12
        })
        .backgroundColor(Color.Black)
    }
  }

  build() {
    Column() {
      Row() {
        Text(this.dataSource[this.index].title)
      }
      .height(50)
      .width('90%')
      .justifyContent(FlexAlign.Center)
      .border({ width: 1 })
      .bindSheet(this.showModal, this.modalBuilder(), {
        height: 300,
        dragBar: false
      })
      .onClick(() => {
        this.showModal = !this.showModal;
      })

      Column() {
        Row() {
          Text('-')
            .width(30)
            .height(30)
            .backgroundColor(Color.Red)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .onClick(() => this.handleClick('minus'))
          Text(String(this.total))
            .height(30)
            .border({ width: 1, color: Color.Red })
            .width(60)
            .textAlign(TextAlign.Center)
          Text('+')
            .width(30)
            .height(30)
            .backgroundColor(Color.Red)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .onClick(() => this.handleClick('add'))
        }
        .margin({ bottom: 20 })
        .bindPopup(this.showPopup, {
          builder: this.popupBuilder(1),
          popupColor: Color.Black,
          placement: Placement.Top,
          autoCancel: false,
          radius: 1,
          mask: false,
          arrowWidth: 8,
          arrowHeight: 6,
          shadow: ShadowStyle.OUTER_DEFAULT_XS
        })

        Row() {
          Text('-')
            .width(30)
            .height(30)
            .backgroundColor(Color.Red)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .onClick(() => this.handleClick2('minus'))
          Text(String(this.total2))
            .height(30)
            .border({ width: 1, color: Color.Red })
            .width(60)
            .textAlign(TextAlign.Center)
          Text('+')
            .width(30)
            .height(30)
            .backgroundColor(Color.Red)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .onClick(() => this.handleClick2('add'))
        }
        .bindPopup(this.showPopup2, {
          builder: this.popupBuilder(2),
          popupColor: Color.Black,
          placement: Placement.Top,
          autoCancel: false,
          radius: 1,
          mask: false,
          arrowWidth: 8,
          arrowHeight: 6,
          shadow: ShadowStyle.OUTER_DEFAULT_XS
        })
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .padding({ top: 50 })
  }
}