当前位置：首页 > news >正文

HarmonyOS：GridObjectSortComponent（两个Grid之间网格元素交换）

news 来源：原创 2025/5/18 3:13:03

一、概述

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

说明
该组件从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")
        }
      })
    }
  }
}