实现List组件中每一个ListItem中的子组件都可以拖动而不被其他组件覆盖

@Component 
struct RowItem { 
  @Prop item: string 
  @State offsetX: number = 0; 
  @State offsetY: number = 0; 
  @State showBubble: boolean = true 
  //子组件 
  build() { 
    Row() { 
      Text('' + this.item) 
        .height(100) 
        .fontSize(16) 
        .textAlign(TextAlign.Center) 
        .width('90%') 
        .zIndex(2) 
        .onClick(() => { 
          if (!this.showBubble) { 
            this.showBubble = true; 
            this.offsetX = 0; 
            this.offsetY = 0; 
          } 
        }) 
      if (this.showBubble) { 
        Circle({ width: 20, height: 20 }) 
          .fill(Color.Red)// .position({ x: this.offsetX, y: this.offsetY }) 
          .translate({ x: this.offsetX, y: this.offsetY, z: 100 }) 
          .gesture(// 绑定拖动手势 
            PanGesture() 
              .onActionStart((event: GestureEvent) => { 
                console.info('Pan start'); 
              })// 当触发拖动手势时，根据回调函数修改组件的布局位置信息 
              .onActionUpdate((event: GestureEvent) => { 
                this.offsetX = event.offsetX; 
                this.offsetY = event.offsetY; 
              }) 
              .onActionEnd(() => { 
                this.showBubble = false 
              }) 
          ) 
      } 
    } 
    .backgroundColor(0xFFFFFF) 
    .width('100%') 
    .borderRadius(10) 
  } 
} 
 
//父组件 
@Entry 
@Component 
struct RedBubble { 
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7] 
  @State touchIndex: number = 0 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (iem: number, index) => { 
          ListItem() { 
            RowItem({ item: iem.toString() }) 
          } 
          //当渲染到当前组件时，动态的提升当前组件的层级 
          .zIndex(this.touchIndex == index ? 1 : 0) 
          .onTouch((e) => { 
            if (e.type === TouchType.Down) { 
              this.touchIndex = index; 
            } else if (e.type === TouchType.Up) { 
              this.touchIndex = -1; 
            } 
            console.log("demoTest " + index) 
          }) 
        }, item => item) 
      } 
      .zIndex(998) 
      .listDirection(Axis.Vertical) // 排列方向 
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 
      .onScrollIndex((firstIndex: number, lastIndex: number) => { 
        console.info('first' + firstIndex) 
        console.info('last' + lastIndex) 
      }) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
}