一、概述
网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。
说明
该组件从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 ToDoconsole.log("保存编辑排序的回调函数 onSave")},// 取消保存数据的回调。onCancel: () =>{// cancel ToDoconsole.log("取消保存数据的回调 onCancel")}})}}
}
