中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
想要grid里面的item支持拖动,拖出来后可以删除,下面的代码就是你们上次给我提供的,正常情况下是可以使用的但是,往下拖的过程中遇到了TextInput后,gridItem的onDragMove就不会走了,我给TextInput设置了draggable(false)后无法解决
微信扫码分享
import { media } from '@kit.MediaKit'; import { BusinessError } from '@kit.BasicServicesKit'; import util from '@ohos.util'; import { curves } from '@kit.ArkUI'; @Entry @Component struct Index { @State numbers: number[] = [] @State isTextInputVisible: boolean = true @State isGridItemVisible: Visibility = Visibility.Visible scroller: Scroller = new Scroller() @State enableScroll: boolean = true @State scaleItem: number = -1 @State dragItem: number = -1 @State offsetX: number = 0 @State offsetY: number = 0 @State currentY: number = 0 private dragRefOffsetx: number = 0 private dragRefOffsety: number = 0 private FIX_VP_X: number = 108 private FIX_VP_Y: number = 120 aboutToAppear() { for (let i = 1; i <= 11; i++) { this.numbers.push(i) } } //向左滑 left(index: number): void { this.offsetX += this.FIX_VP_X this.dragRefOffsetx -= this.FIX_VP_X this.itemMove(index, index - 1) } //向右滑 right(index: number): void { this.offsetX -= this.FIX_VP_X this.dragRefOffsetx += this.FIX_VP_X this.itemMove(index, index + 1) } itemMove(index: number, newIndex: number): void { console.info('index:' + index + ' newIndex:' + newIndex) let tmp = this.numbers.splice(index, 1) this.numbers.splice(newIndex, 0, tmp[0]) } build() { Column({ space: 5 }) { Grid(this.scroller) { ForEach(this.numbers, (item: number) => { GridItem() { Text(item + '') .fontSize(16) .width('100%') .textAlign(TextAlign.Center) .height(100) .borderRadius(10) .backgroundColor(0xFFFFFF) .animation({ curve: Curve.Sharp, duration: 300 }) } .visibility(this.dragItem == item ? Visibility.Hidden : Visibility.Visible) // 根据被拖动的item来设置visibility .width(100) .height(100) .padding(5) .zIndex(this.dragItem == item ? 1 : 0) .scale({ x: this.scaleItem == item ? 1.05 : 1, y: this.scaleItem == item ? 1.05 : 1 }) .translate(this.dragItem == item ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 }) .onDragStart((event: DragEvent, extraParams?: string) => { animateTo({ curve: Curve.Friction, duration: 300 }, () => { this.scaleItem = item }) this.dragItem = item this.dragRefOffsetx = event.getWindowX() this.dragRefOffsety = event.getWindowY() }) .onDrop((event: DragEvent, extraParams?: string) => { }) .onDragMove((event: DragEvent, extraParams?: string) => { this.enableScroll = false console.log('onDragMove GridItem getWindowX', event.getWindowX()) console.log('onDragMove GridItem getWindowY', event.getWindowY()) this.offsetX = event.getWindowX() - this.dragRefOffsetx this.offsetY = event.getWindowY() - this.dragRefOffsety this.currentY = event.getWindowY() console.log('onDragMove GridItem offsetX', this.currentY) animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { let index = this.numbers.indexOf(this.dragItem) console.log('index', index) if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY < this.FIX_VP_Y) { this.right(index) } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY < this.FIX_VP_Y) { this.left(index) } }) this.isGridItemVisible = Visibility.Hidden }) .onDragEnd(() => { this.enableScroll = true this.isTextInputVisible = true this.isGridItemVisible = Visibility.Visible animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => { this.dragItem = -1 this.scaleItem = -1 }) }) }, (item: number) => item.toString()) } .padding({ left: 20, right: 20 }) .width('100%') .height('120') .scrollBar(BarState.Off) .rowsTemplate('1fr') .columnsGap(5) .editMode(true) .edgeEffect(EdgeEffect.Spring) .backgroundColor('#0D182431') .enabled(this.enableScroll) // Modified TextInput to ignore drag events TextInput({placeholder: '添加标题'}) .width('100%') .height(200) // .visibility(this.isTextInputVisible ? Visibility.Visible : Visibility.Hidden) // .onDragMove(() => { // // 隐藏TextInput // this.isTextInputVisible = false // }) Text('删除') .width('100%') .height(50) .backgroundColor(Color.Red) .position({ bottom: 0 }) .visibility(this.currentY > 580 ? Visibility.Visible : Visibility.Hidden) .hitTestBehavior(HitTestMode.None) } .width('100%') .height('100%') .margin({ top: 5 }) .backgroundColor('#0D182431') } }