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

PingWinkly

于 2024-07-25 19:54:46 发布

阅读量378

点赞数 7

文章标签：鸿蒙 ui 动画

本文链接：https://blog.csdn.net/qq_47666879/article/details/140698496

版权

涉及的事件及组件

1、Grid组件

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

2、事件

onItemDragStart8+

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

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

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

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

参数名	类型	必填	说明
event	ItemDragInfo	是	拖拽点的信息。
itemIndex	number	是	拖拽离开的网格元素索引值。

onItemDrop8+

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

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

参数：

参数名	类型	必填	说明
event	ItemDragInfo	是	拖拽点的信息。
itemIndex	number	是	拖拽起始位置。
insertIndex	number	是	拖拽插入位置。
isSuccess	boolean	是	是否成功释放

代码：

import {  promptAction } from '@kit.ArkUI';

// 定义车门车控列表数据类型
interface IVehicleDoor{
  title:string
  icon: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;
  }
  //设置拖拽过程中显示的图片。
  @Builder
  pixelMapBuilder() {
    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 = index
              this.isPress = true
              setTimeout(()=>{
                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 = false
              animateTo({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 = itemIndex
        this.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:IVehicleDoor
  build() {
    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})
    }
  }
}