HarmonyOS:GridObjectSortComponent(两个Grid之间网格元素交换)

一、概述

网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。

说明

该组件从API Version 11开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

二、导入模块

复制代码
import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'

三、子组件

四、属性

不支持通用属性。

五、GridObjectSortComponent

GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array, onSave: (select: Array, unselect: Array) => void, onCancel: () => void })

装饰器类型: @Component

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 装饰器类型 说明
options GridObjectSortComponentOptions @Prop 组件配置信息。
dataList Array<GridObjectSortComponentItem> - 传入的数据,最大长度为50,数据长度超过50,只会取前50的数据。
onSave (select: Array, unselect: Array<GridObjectSortComponentItem>) => void - 保存编辑排序的回调函数,返回编辑后的数据。
onCancel () => void - 取消保存数据的回调。

六、GridObjectSortComponentOptions

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
type GridObjectSortComponentType 组件展示形态:文字|图片+文字。 默认:GridObjectSortComponentType.text。
imageSize number | Resource 图片的尺寸,单位vp。 取值范围:大于等于0。 默认值:56vp。
normalTitle ResourceStr 未编辑状态下显示的标题。 默认值:频道。
showAreaTitle ResourceStr 展示区域标题,第一个子标题。 默认值:长按拖动排序。
addAreaTitle ResourceStr 添加区域标题,第二个子标题。 默认值:点击添加。
editTitle ResourceStr 编辑状态下头部标题显示。 默认值:编辑。

七、GridObjectSortComponentType

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 说明
IMAGE_TEXT 'image_text' 图片文字类型。
TEXT 'text' 文字类型。

八、GridObjectSortComponentItem

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
id number | string 数据id序号,不可重复。 默认值:空字符串。
text ResourceStr 显示文本信息。
selected boolean 是否已经被添加,添加:true,未添加:false。
url ResourceStr GridObjectSortComponentType类型为IMAGE_TEXT时,需要传入图片地址。
order number 顺序序号。 取值范围:大于等于0。 默认值:0。

九、事件

不支持通用事件。

十、示例

网格对象的编辑排序组件基础用法,涉及对组件配置信息初始化,数据初始化,保存、取消方法的使用。
效果图

示例TestGridObjectSortComponent.ets代码

复制代码
import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'

@Entry
@Component
struct TestGridObjectSortComponent {
  // 组件数据初始化
  @State dataList: GridObjectSortComponentItem[] = [
    {
      id: 0,
      url: $r('sys.media.ohos_save_button_filled'),
      text: '下载',
      selected: true,
      order: 3
    },
    {
      id: 1,
      url: $r('sys.media.ohos_ic_public_web'),
      text: '网路',
      selected: true,
      order: 9
    },
    {
      id: 2,
      url: $r('sys.media.ohos_ic_public_video'),
      text: '视频',
      selected: false,
      order: 1
    }
  ]

  // 组件配置信息初始化
  @State option: GridObjectSortComponentOptions = {
    type: GridObjectSortComponentType.IMAGE_TEXT,
    imageSize: 45,
    normalTitle: '菜单',
    editTitle: '编辑',
    showAreaTitle: '长按拖动排序',
    addAreaTitle: '点击添加'
  }

  build() {
    Column() {
      GridObjectSortComponent({
        options: this.option,
        dataList: this.dataList,
        // 保存编辑排序的回调函数,返回编辑后的数据。
        onSave: (
          select: Array<GridObjectSortComponentItem>,
          unselect: Array<GridObjectSortComponentItem>
        ) => {
          // save ToDo
          console.log("保存编辑排序的回调函数 onSave")
        },
        // 取消保存数据的回调。
        onCancel: () =>{
          // cancel ToDo
          console.log("取消保存数据的回调 onCancel")
        }
      })
    }
  }
}
相关推荐
SuperHeroWu74 小时前
【HarmonyOS 5】鸿蒙检测系统完整性
华为·harmonyos·模拟器·系统完整性·越狱设备
京东云开发者5 小时前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
harmonyos
前端付豪6 小时前
2、ArkTS 是什么?鸿蒙最强开发语言语法全讲解(附实操案例)
前端·后端·harmonyos
zhujiaming6 小时前
鸿蒙端应用适配使用开源flutter值得注意的一些问题
前端·flutter·harmonyos
前端付豪6 小时前
8、鸿蒙动画开发实战:做一个会跳舞的按钮!(附动效示意图)
前端·后端·harmonyos
前端付豪6 小时前
3、构建你的第一个鸿蒙组件化 UI 页面:实现可复用的卡片组件(附实战代码)
前端·后端·harmonyos
前端付豪6 小时前
7、打造鸿蒙原生日历组件:自定义 UI + 数据交互(附实操案例与效果图)
前端·后端·harmonyos
北海zx7 小时前
HarmonyNext:如何在鸿蒙上录屏后进行音视频编码
harmonyos
别说我什么都不会7 小时前
【仓颉三方库】音视频开发—— ijkplayer-ffi
harmonyos
佛系菜狗7 小时前
鸿蒙OSS文件(视频/图片)压缩上传组件-能够增删改查
前端·鸿蒙