中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
把一个 Toggle 做成可拖动的,Toggle 类型是 Button,拖动时会触发 Toggle 的点击事件,有什么办法屏蔽吗? 试了下只有类型是 Button 的时候有问题,Checkbox 和 Switch 正常
微信扫码分享
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; }) ) } } }