鸿蒙开发:实现一个超简单的网格拖拽

简介: 实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。

前言


代码运行环境:全部基于HarmonyOs NEXT

DevEco Studio:Build Version: 5.0.3.900

API:12

modelVersion5.0.0


网格拖拽,此功能很是常见,一般用于频道的编辑或者条目顺序的排列,在鸿蒙的开发中,针对网格的编辑,系统也给出了相关的Api,通过onItemDragStart和在onItemDrop即可轻松实现,onItemDragStart用于设置拖拽过程中的显示,onItemDrop是进行数据交换逻辑处理。


根据官方提供,我们随便实现了一个简单的拖拽效果:


@Entry
  @Component
  struct Index {
    @State numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    @Builder
    itemLayout(text: string) {
      Text(text)
        .fontSize(16)
        .backgroundColor(Color.Pink)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
    changeIndex(index1: number, index2: number) { //交换数组位置
      let temp = this.numbers[index1];
      this.numbers[index1] = this.numbers[index2];
      this.numbers[index2] = temp;
    }
    build() {
      Column() {
        Grid() {
          ForEach(this.numbers, (n: number) => {
            GridItem() {
              this.itemLayout(n.toString())
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
          .columnsGap(10)
          .rowsGap(10)
          .editMode(true) //设置Grid是否进入编辑模式
          .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。
            return this.itemLayout(this.numbers[itemIndex].toString()) //设置拖拽过程中显示
          })
          .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number,
                       isSuccess: boolean) => {
                         if (!isSuccess || insertIndex >= this.numbers.length) {
                           return
                         }
                         this.changeIndex(itemIndex, insertIndex)
                       })
      }.width('100%')
        .height("100%")
    }
  }



以上代码我们就很简单的实现了一个网格拖拽,实际运行之后,长按确实发生了拖拽,和对应的item也进行了交换,但是并没有一个移动交换的过程,这是因为没有设置拖拽动画方法,如果想要拖拽过程中有移动动画,只需要设置supportAnimation为true即可,除此之外,还有一个非常重要的属性,那就是editMode,为true即为编辑模式,false即不可编辑。


拖拽的代码很是简单,毕竟官方也给出了相关案例,其中有两个点是未给出的,那就是禁止拖拽,和禁止与其交换。


比如,第一个和第二个条目,不能拖拽,如何进行设置呢?再比如,任何条目都不能和第一个进行交换,又该如何设置呢?


禁止拖拽


还是上述的代码,例如,把第一个条目禁止,不让其执行拖拽,实现起来很是简单,在onItemDragStart方法里,如果触摸的是指定索引,不让其执行即可。


.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { 
  //第一次拖拽此事件绑定的组件时,触发回调。
  if (itemIndex == 0) {
    //禁止拖拽
    return
  }
  return this.itemLayout(this.numbers[itemIndex].toString()) //设置拖拽过程中显示
})


需要注意的是,以上的代码仅仅是做到了禁止拖拽,但是,有一个潜在的问题是,别的条目是可以和它进行交换的,交换过之后,由于它的索引发生了变化,就变得可以拖拽了,如果想实现真正的,即便被交换后也不能拖拽,那就不能判断索引了,可以以唯一值进行判断,比如item数据换成对象,在对象里定义唯一值。


禁止交换


实际的开发中,除了某个条目禁止拖拽之外,也有不能和它进行交换的逻辑,比如第一个条目,就是固定的,不仅仅禁止拖拽,也不能和其进行交换,这种情况下如何进行实现呢?


onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number,
            isSuccess: boolean) => {
              //第一个禁止交换
              if (insertIndex <= 0) {
                return
              }
              if (!isSuccess || insertIndex >= this.numbers.length) {
                return
              }
              this.changeIndex(itemIndex, insertIndex)
            })


很是简单,如果是第一个,直接不执行即可,以上的代码虽然实现了禁止交换,但是有一个问题,那就是实际的动画已经执行了,只是最后的交换没有执行而已,在视觉上仍然存在很大的问题。



我们想要的效果是,保留移动拖拽的动画,只是拖拽到第一个时,动画不执行,其他的该怎么执行就怎么执行。


那么,在设置supportAnimation动画的时候,就不能直接设置为true了,而是移动到条目一的位置后,设置为fasle,其他再设置为true。


如何拿到第一个item的坐标呢,其实每一个组件都有一个方法,onAreaChange,通过这个属性,我们就可以拿到任何一个组件的宽高还有,xy的坐标,当然,你也可以通过计算的方式,毕竟,屏幕的宽高,还有条目的宽高你都知道。


手势移动的坐标可以通过onTouch方法进行获取,在Move事件中进行判断,如果移动到了条目一的范围之内,取消动画,否则就执行动画。



简单实现


目前呢这个网格拖拽功能已经做了一层封装,放到了refresh库中,大家如果想直接使用,可以依赖这个库:


"dependencies": { "@abner/refresh": "^1.3.6"}


简单案例如下:


import { GridDropView } from '@abner/refresh'
@Entry
  @Component
  struct Index {
    @State numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    @Builder
    itemLayout(item: Object, _: number) {
      Text(item.toString())
        .fontSize(16)
        .backgroundColor(Color.Pink)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
    build() {
      Column() {
        GridDropView({
          columnsTemplate:"1fr 1fr 1fr",
          items: this.numbers,
          itemLayout: this.itemLayout,
          dropLayout: this.itemLayout,
          rowsGap: 10,
          columnsGap: 10,
          isEditMode: true,
          prohibitDrop: [0, 1], //禁止拖拽的索引
          prohibitMaxSwap: 0, //禁止交换
          onDropData: (items) => {
            console.log("拖拽结束:" + JSON.stringify(items))
          }
        })
      }.width('100%')
        .height("100%")
    }
  }


注意事项


实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。

目录
打赏
0
12
13
0
166
分享
相关文章
|
5天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
|
2天前
|
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
25 13
鸿蒙开发:实现AOP代码插桩能力
|
6天前
鸿蒙开发:熟知@BuilderParam装饰器
在实际的开发中,我们经常会遇到自定义组件的情况,比如通用的列表组件,选项卡组件等等,由于使用方的样式不一,子组件是动态变化的,针对这一情况,就不得不让使用方把子组件视图传递过来,如何来接收这个UI视图,这就是@BuilderParam装饰器的作用。
鸿蒙开发:熟知@BuilderParam装饰器
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
68 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
4天前
|
鸿蒙开发:校验构造传参装饰器@Require
@Require装饰器依赖ArkTs的类型检查,仅在编译阶段拦截类型错误和缺失参数,对于运行时才能确定的动态值,如从网络请求获取的数据,仍需在生命周期函数中进行二次校验。
39 18
鸿蒙开发:V2版本装饰器之@Monitor装饰器
如果要实现@Monitor监听,其变量一定要被@Local、@Param、@Provider、@Consumer、@Computed装饰,未被修饰则无法被监听,还有,如果监听对象的变化,则不建议在一个类中对同一个属性进行多次@Monitor的监听,多次监听,只有最后一个定义的监听方法才会有效。
HarmonyOS NEXT开发-ArkUI六
本文介绍了颜色渐变(线性渐变和径向渐变)与阴影效果的应用,通过具体代码示例展示了如何在组件中实现这些视觉效果,帮助开发者提升界面美观度。君志所向,一往无前,欢迎一起探索! 简介字数:239
16 0
HarmonyOS NEXT开发-ArkUI六
HarmonyOS NEXT开发-ArkUI八
本文介绍了Harmony OS开发中的线性布局技巧,包括交叉轴对齐、自适应缩放及综合实践案例,帮助开发者轻松掌握相关技能。每天学习一个知识点,一起加油!
18 0
HarmonyOS NEXT开发-ArkUI八
HarmonyOS NEXT开发-ArkUI十二
网格布局(Grid)适用于由多行列组成的复杂界面,支持固定行列、合并单元格及滚动效果。其应用场景广泛,如文件管理、购物列表等。通过设置`columnsTemplate`和`rowsTemplate`可定义行列比例,使用`GridItem`组件实现内容展示。此外,还能通过自定义滚动条优化用户体验。代码示例展示了如何创建固定行列、合并单元格以及实现滚动效果的网格布局。 关注程序员Feri,了解更多实用技术与搞钱技巧,一起在编程道路上不断前行!
22 0
HarmonyOS NEXT开发-ArkUI十二
HarmonyOS NEXT开发-ArkUI十一
本文介绍Swiper组件,它用于滑动轮播显示,支持自动播放、纵向滑动、自定义导航点等特性。通过设置尺寸、内容及属性,可实现丰富的轮播效果。示例代码展示了基本用法和综合实践,帮助开发者快速上手。
28 0
HarmonyOS NEXT开发-ArkUI十一

热门文章

最新文章

  • 1
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    16
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    13
  • 3
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    8
  • 4
    鸿蒙开发:了解@Builder装饰器
    7
  • 5
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    23
  • 6
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • 7
    Harmony os next~HarmonyOS Ability与页面跳转开发详解
    43
  • 8
    HarmonyOS使用系统图标
    6
  • 9
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    16
  • 10
    鸿蒙H5离线包技术分享
    32
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等