HarmonyOS 鸿蒙Next：让grid编辑模式的自定义拖动元素拖出grid范围就被裁剪，类似.clip(true)

导入 { JSON } from ‘@kit.ArkTS’

@Component 结构 GridExample { @State numbers: string[] = [] scroller: Scroller = new Scroller() @State text: string = ‘drag’

@Builder pixelMapBuilder() { //拖拽过程样式 Column { Text(this.text) .fontSize(16) .backgroundColor(0xF9CF93) .width(80) .height(80) .textAlign(TextAlign.Center) } }

aboutToAppear() { for (let i = 1; i <= 15; i++) { this.numbers.push(i + ‘’) } }

changeIndex(index1: number, index2: number) { //交换数组位置 let temp: string; temp = this.numbers[index1]; this.numbers[index1] = this.numbers[index2]; this.numbers[index2] = temp; }

build() { Column({ space: 5 }) { Grid(this.scroller) { ForEach(this.numbers, (day: string) => { GridItem { Text(day) .fontSize(16) .backgroundColor(0xF9CF93) .width(80) .height(80) .textAlign(TextAlign.Center) } }) } .columnsTemplate(‘1fr 1fr 1fr’) .columnsGap(10) .rowsGap(10) .width(‘90%’) .backgroundColor(0xFAEEE0) .height(‘60%’) .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。 this.text = this.numbers[itemIndex] return this.pixelMapBuilder() //设置拖拽过程中显示的图片。 }) .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。 // isSuccess=false时，说明drop的位置在grid外部；insertIndex > length时，说明需要删除元素 if (!isSuccess || insertIndex >= this.numbers.length) { this.numbers.splice(itemIndex, 1) console.log(JSON.stringify(this.numbers)) return } console.info(‘beixiang’ + itemIndex + ‘’, insertIndex + ‘’) //itemIndex拖拽起始位置，insertIndex拖拽插入位置 this.changeIndex(itemIndex, insertIndex) }) } .width(‘100%’) .margin({ top: 5 }) } }