在HarmonyOS NEXT开发中把一个 Toggle 做成可拖动的，Toggle 类型是 Button，拖动时会触发 Toggle 的点击事件，有什么办法屏蔽吗？

Question

在HarmonyOS NEXT开发中把一个 Toggle 做成可拖动的，Toggle 类型是 Button，拖动时会触发 Toggle 的点击事件，有什么办法屏蔽吗？试了下只有类型是 Button 的时候有问题，Checkbox 和 Switch 正常

Answer 1

解决方案如下：

import { hilog } from '@kit.PerformanceAnalysisKit'; 
 
@Component 
export struct TestDragToggleWithBtn { 
  @State offsetX: number = 0; 
  @State offsetY: number = 0; 
  @State positionX: number = 0; 
  @State positionY: number = 0; 
  @State toggleIsOn: boolean = true; 
  private isDragging: boolean = false; 
 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 
      Toggle({ type: ToggleType.Button, isOn: this.toggleIsOn }) { 
        Text('Toggle') 
      } 
      .selectedColor(Color.Pink) 
      // onchange回调先于onActionEnd 
      .onChange((isOn: boolean) => { 
        hilog.info(0x0000, 'testTag', 'xxx %{public}s', onClick 
        Toggle, isOn: 
        $ 
        { 
          isOn 
        } 
        ) 
        ; 
        console.log('isDragging======' + this.isDragging) 
        if (isOn == this.toggleIsOn) { 
          return 
        } else { 
          this.toggleIsOn = isOn 
        } 
        if (this.isDragging) { 
          this.toggleIsOn = !this.toggleIsOn 
        } 
      }) 
      .translate({ x: this.offsetX, y: this.offsetY }) 
      .gesture( 
        PanGesture() 
          .onActionStart((event: GestureEvent) => { 
            this.isDragging = true; 
          }) 
          .onActionUpdate((event: GestureEvent) => { 
            this.offsetX = this.positionX + event.offsetX; 
            this.offsetY = this.positionY + event.offsetY; 
          }) 
          .onActionEnd((event: GestureEvent) => { 
            this.positionX = this.offsetX; 
            this.positionY = this.offsetY; 
            this.isDragging = false; 
          }) 
      ) 
    } 
  } 
}