鸿蒙之Grid实现拖动自定义排序特效

涉及的事件及组件

1、Grid组件

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。仅支持GridItem子组件，支持渲染控制类型（if/else、ForEach、LazyForEach和Repeat）

2、事件

onItemDragStart8+

onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) | void)

开始拖拽网格元素时触发。返回void表示不能拖拽。

手指长按GridItem时触发该事件。

由于拖拽检测也需要长按，且事件处理机制优先触发子组件事件，GridItem上绑定LongPressGesture时无法触发拖拽。如有长按和拖拽同时使用的需求可以使用通用拖拽事件。

onItemDrop8+

onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void)

绑定该事件的网格元素可作为拖拽释放目标，当在网格元素内停止拖拽时触发

参数：

代码：

import {  promptAction } from '@kit.ArkUI';// 定义车门车控列表数据类型
interface IVehicleDoor{title:stringicon:ResourceStr
}
//注意要用模拟器，用预览器将会出现空白效果
@Entry
@Component
struct Index {// 存储渲染数据列表的数组@State VehicleDoorArr:IVehicleDoor[] = []// 当前移动的Item索引@State CurrentIndex:number = -1// 拖动时显示的数据@State MoveItem:IVehicleDoor = {title:'',icon:''}// 拖动时放大倍数@State ScaleXY:ScaleOptions = {x:1,y:1}// 是否超出范围@State isExtendGridArea:boolean = false@State isPress:boolean = false//是否按压aboutToAppear() {// 列表的数据let list:IVehicleDoor[] =  [{title:'远程启动1',icon:$r("app.media.icon_nor01")},{title:'远程启动2',icon:$r("app.media.icon_nor01")},{title:'远程启动3',icon:$r("app.media.icon_nor01")},{title:'远程启动4',icon:$r("app.media.icon_nor01")},{title:'远程启动5',icon:$r("app.media.icon_nor01")},{title:'远程启动6',icon:$r("app.media.icon_nor01")},{title:'远程启动7',icon:$r("app.media.icon_nor01")},]if(this.VehicleDoorArr.length==0){list.forEach((item:IVehicleDoor,index:number)=>{this.VehicleDoorArr.push(item)})}}changeIndex(itemIndex: number, inertIndex: number) {// 交换数组位置let temp = this.VehicleDoorArr[itemIndex];this.VehicleDoorArr[itemIndex] = this.VehicleDoorArr[inertIndex];this.VehicleDoorArr[inertIndex] = temp;}//设置拖拽过程中显示的图片。@BuilderpixelMapBuilder() {VehicleDoorItem({VehicleDoorItem:this.MoveItem})}build() {Column() {Row(){Divider().strokeWidth(0.5).width(95)Text('长按可拖动顺序').width(112).height(24).fontSize('16fp').fontWeight(400).textAlign(TextAlign.Center).fontFamily('PingFang SC').margin({left:16.5,right:16.5})Divider().strokeWidth(0.5).width(95)}.width('100%').margin({top:24,bottom:24}).justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Center)// 车控列表项目Grid(){ForEach(this.VehicleDoorArr,(item:IVehicleDoor,index:number)=>{GridItem(){VehicleDoorItem({VehicleDoorItem:(item?item:this.MoveItem)})}.scale(this.CurrentIndex === index?this.ScaleXY:{x:1,y:1}).onTouch((event: TouchEvent) => {// 按下时if(event.type === TouchType.Down){this.MoveItem = this.VehicleDoorArr[index]this.CurrentIndex = indexthis.isPress = truesetTimeout(()=>{if(this.isPress){animateTo({duration:100, curve:Curve.Linear,onFinish:()=>{// this.ScaleXY = {x:1,y:1}}},()=>{this.ScaleXY = {x:1.3,y:1.3}})}},700)}// 松开时if (event.type === TouchType.Up) {this.isPress = falseanimateTo({duration:400, curve:Curve.EaseIn,onFinish:()=>{}},()=>{this.ScaleXY = {x:1,y:1}})}})})}.columnsTemplate('1fr 1fr 1fr 1fr').rowsGap(31).columnsGap(37).width('100%').height(300).padding({left:20,right:20}).clip(true)//超出容器范围时剪裁.supportAnimation(true)//开启GridItem支持拖拽动画.editMode(true) // 设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem// .onItemDragLeave(()=>{//   // 拖拽出组件范围//   this.isExtendGridArea = true//   promptAction.showToast({message: '离开了'})// })// .onItemDragEnter(()=>{//   promptAction.showToast({message: '进入了'})//   // 重新进入组件//   this.isExtendGridArea = false// }).onItemDragStart((event: ItemDragInfo, itemIndex: number) => {// 第一次拖拽此事件绑定的组件时，触发回调。(开始拖动时触发)this.CurrentIndex = itemIndexthis.MoveItem = this.VehicleDoorArr[itemIndex]return this.pixelMapBuilder(); //设置拖拽过程中显示的图片。})// 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {// itemIndex拖拽起始位置，insertIndex拖拽插入位置,// isSuccess是否成功释放// promptAction.showToast({message:'insertIndex'+insertIndex+'itemIndex'+itemIndex})if(insertIndex===-1){//如果insertIndex的值为-1，代表插入位置出现错误insertIndex = this.CurrentIndex}// AlertDialog.show({message:'insertIndex2'+insertIndex+'itemIndex2'+itemIndex})if(insertIndex>this.VehicleDoorArr.length||!isSuccess){return}this.changeIndex(itemIndex,insertIndex)promptAction.showToast({message:'切换成功'+insertIndex+'insertIndex'+'itemIndex'+itemIndex})this.isPress?this.ScaleXY={x:1.3,y:1.3}:this.ScaleXY={x:1,y:1}})Blank()//   完成按钮Row(){Button('完成').width(240).height(44).backgroundColor(Color.Transparent).border({width:1}).fontColor(Color.Black).padding(0).fontFamily('PingFang SC').fontWeight(400).fontSize('16fp').onClick(()=>{//   todo:接口提交保存数据})}.margin({bottom:54}).width('100%').justifyContent(FlexAlign.Center).zIndex(99)}.height('100%').width('100%').backgroundColor('rgba(248, 248, 248, 1)').expandSafeArea([SafeAreaType.SYSTEM,SafeAreaType.KEYBOARD], [ SafeAreaEdge.BOTTOM])}
}
// GridItem子列表项
@Component
export struct VehicleDoorItem{@Prop VehicleDoorItem:IVehicleDoorbuild() {Column(){Column(){Image(this.VehicleDoorItem.icon).width(24).aspectRatio(1)}.height(56).width(56).borderRadius(56).justifyContent(FlexAlign.Center).backgroundColor(Color.White)// .draggable(true)//是否支持拖拽Text(this.VehicleDoorItem.title).height(17).fontSize('12fp').textAlign(TextAlign.Center).fontFamily('PingFang SC').fontWeight(400).margin({top:6})}}
}

效果：