在HarmonyOS NEXT开发中bindPopup遇到问题？

Question

在HarmonyOS NEXT开发中bindPopup遇到问题？给每个ListItem长按后增加了一个Popup
问题1:在外层设置了一个@state 的状态，长按后会同时弹出好几个Pop怎样监听按哪一个弹哪一个？
问题2:点击Pop后有删除当前条目的操作，怎么监听POP的点击？点击了删除后，怎么让Pop消失？

Answer 1

可参考以下demo：

import { router } from '@kit.ArkUI' 
import { BusinessError } from '@kit.BasicServicesKit' 
 
@Entry 
@Component 
export struct Index { 
  @State list: stockListData = new stockListData([]) 
 
  aboutToAppear(): void { 
    const list: ItemInfo[] = [] 
    for (let i = 0; i < 50; ++i) { 
      let stockName = "item" + i 
      let bgState = 0 
      list.push(new ItemInfo(stockName, bgState)) 
    } 
    this.list.modifyAllData(list) 
 
  } 
 
  build() { 
    Column() { 
      Text("开始").height('50') 
        .width('100%').onClick(() => { 
      }) 
      List({ space: 10 }) { 
        LazyForEach(this.list, (info: ItemInfo, index: number) => { 
          ListItem() { 
            ItemView({ 
              info: info, itemFun: (name) => { 
                let itemIndex = 0 
                for (let im of this.list.getAllData()) { 
                  if (im.stockName === name) { 
                    break 
                  } 
                  itemIndex++ 
                } 
                console.info("animate--ItemView--aboutToReuse---delete Name=" + name) 
                this.list.getAllData().splice(itemIndex, 1) 
                this.list.notifyDataDelete(itemIndex) 
              } 
            }) 
              .onClick(() => { 
              }) 
          }.height('80') 
        }, (info: ItemInfo, index: number) => info.stockName + "type" + index) 
      } 
      .height('100%') 
      .width('100%') 
    } 
    .height('100%') 
    .width('100%') 
  } 
} 
 
@Reusable 
@Component 
struct ItemView { 
  @Prop info: ItemInfo 
  private lastName: string = "" 
 
  aboutToAppear(): void { 
    this.lastName = this.info.stockName 
  } 
 
  aboutToReuse(params: Record<string, Object>): void { 
    console.info("animate--ItemView--aboutToReuse---name=" + this.info.stockName + ",lastName=" + this.lastName) 
 
    this.lastName = this.info.stockName 
  } 
 
  @State customPopup: boolean = false 
  itemFun: (name: string) => void = (name) => { 
  } 
 
  @Builder 
  popItemsView() { 
    Text("qipao pop").onClick(() => { 
      this.customPopup = !this.customPopup 
      this.itemFun(this.info.stockName) 
    }) 
  } 
 
  build() { 
    Column() { 
      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 
        Column() { 
          Text(this.info.stockName) 
            .maxFontSize('16') 
            .minFontSize('8') 
            .maxLines(1) 
            .margin({ bottom: 2 }) 
        } 
        .width('36.27%') 
        .alignItems(HorizontalAlign.Start) 
        .padding({ left: '16', right: 8 }) 
      } 
      .backgroundColor("#00ffea") 
      .height('100%') 
    } 
    .bindPopup(this.customPopup, { 
      builder: this.popItemsView, // 气泡的内容 
      placement: Placement.Top, // 气泡的弹出位置 
      offset: { x: 0, y: 30 }, 
      radius: 12, 
      popupColor: Color.Pink, // 气泡的背景色 
      onStateChange: (e) => { 
        console.info('tag', JSON.stringify(e.isVisible)) 
        if (!e.isVisible) { 
          this.customPopup = false 
          // this.bgColor = this.info.topStatus == 1 ? $r('app.color.dialog_background') : $r('app.color.start_window_background') 
        } else { 
          this.customPopup = true 
          // this.bgColor = $r('app.color.dialog_button') 
        } 
      } 
    }) 
    .gesture( 
      LongPressGesture({ repeat: false })// 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms） 
        .onAction((event?: GestureEvent) => { 
          console.log("tag", "LongPressGesture start event--customPopup=" + this.customPopup) 
          if (event) { 
            this.customPopup = !this.customPopup 
          } 
          // if (event && event.repeat) { 
          // } 
        })// 长按动作一结束触发 
        .onActionEnd((event?: GestureEvent) => { 
          if (event) { 
          } 
        }) 
    ) 
  } 
} 
 
@Observed 
class ItemInfo { 
  @Track 
  stockName: string = "--" 
  @Track 
  bgState: number = 0 
 
  constructor(name: string, bg: number) { 
    this.stockName = name 
    this.bgState = bg 
  } 
} 
 
 
class BasicDataSource implements IDataSource { 
  private listeners: DataChangeListener[] = []; 
 
  public totalCount(): number { 
    return 0; 
  } 
 
  public getData(index: number): ItemInfo | undefined { 
    return undefined; 
  } 
 
  registerDataChangeListener(listener: DataChangeListener): void { 
    if (this.listeners.indexOf(listener) < 0) { 
      this.listeners.push(listener); 
    } 
  } 
 
  unregisterDataChangeListener(listener: DataChangeListener): void { 
    const position = this.listeners.indexOf(listener); 
    if (position >= 0) { 
      this.listeners.splice(position, 1); 
    } 
  } 
 
  notifyDataReload(): void { 
    this.listeners.forEach((listener: DataChangeListener) => { 
      listener.onDataReloaded(); 
    }) 
  } 
 
  notifyDataAdd(index: number): void { 
    this.listeners.forEach((listener: DataChangeListener) => { 
      listener.onDataAdd(index); 
    }) 
  } 
 
  notifyDataChange(index: number): void { 
    this.listeners.forEach((listener: DataChangeListener) => { 
      listener.onDataChange(index); 
    }) 
  } 
 
  notifyDataDelete(index: number): void { 
    this.listeners.forEach((listener: DataChangeListener) => { 
      listener.onDataDelete(index); 
    }) 
  } 
 
  notifyDataMove(from: number, to: number): void { 
    this.listeners.forEach((listener: DataChangeListener) => { 
      listener.onDataMove(from, to); 
    }) 
  } 
} 
 
export class stockListData extends BasicDataSource { 
  private listData: ItemInfo[] = []; 
 
  constructor(dataArray: ItemInfo[]) { 
    super() 
    this.listData = dataArray; 
  } 
 
  public totalCount(): number { 
    return this.listData.length; 
  } 
 
  public getAllData(): ItemInfo[] { 
    return this.listData; 
  } 
 
  public getData(index: number): ItemInfo { 
    return this.listData[index]; 
  } 
 
  public modifyAllData(data: ItemInfo[]): void { 
    this.listData = data 
    this.notifyDataReload() 
  } 
}