yt_green_plants/features/feature/src/main/ets/components/FloatingComp.ets

import { UserInfo, userInfo } from 'basic';

@Component
export struct FloatingComp {
  @Prop src: ResourceStr = $r('[basic].media.app_icon')
  initPosition: Position | Edges | LocalizedEdges = { right: '50%', bottom: 20 }
  imageWidth: number = 48
  @State private cumulativeX: number = 0;
  @State private cumulativeY: number = 0;
  @StorageProp(UserInfo.KEY) private userInfo: UserInfo = userInfo
  private startX: number = 0;
  private startY: number = 0;
  click = () => {
  }

  build() {
    if (this.userInfo.checkLogin()) {
      Image(this.src)
        .width(this.imageWidth)
        .aspectRatio(1)
        .borderRadius(9999)
        .gesture(
          PanGesture({ distance: 1 })
            .onActionStart(() => {
              this.startX = this.cumulativeX;
              this.startY = this.cumulativeY;
            })
            .onActionUpdate(event => {
              // 记录起始位置
              this.cumulativeX = this.startX + event.offsetX;
              this.cumulativeY = this.startY + event.offsetY;
            })
        )
        .translate({ x: this.cumulativeX, y: this.cumulativeY })
        .position(this.initPosition)
        .markAnchor({ x: -this.imageWidth / 2 })
        .onClick(this.click)
    }
  }
}