1# GridObjectSortComponent 2 3 4网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。 5 6 7> **说明：** 8> 9> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14```ts 15import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI' 16``` 17 18## 子组件 19 20无 21 22## 属性 23 24不支持[通用属性](ts-component-general-attributes.md)。 25 26## GridObjectSortComponent 27 28GridObjectSortComponent({options: GridObjectSortComponentOptions, dataList: Array\<GridObjectSortComponentItem>, onSave: (select: Array\<GridObjectSortComponentItem>, unselect: Array\<GridObjectSortComponentItem>) => void, onCancel: () => void }) 29 30**装饰器类型：**\@Component 31 32**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36 37| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 38| -------- | -------------------------------- | ---------- | ---- | ---- | 39| options | [GridObjectSortComponentOptions](#gridobjectsortcomponentoptions) | 是 | @Prop | 组件配置信息。 | 40| dataList | Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)> | 是 | - | 传入的数据，最大长度为50，数据长度超过50，只会取前50的数据。 | 41| onSave | (select: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>, unselect: Array<[GridObjectSortComponentItem](#gridobjectsortcomponentitem)>) => void | 是 | - | 保存编辑排序的回调函数，返回编辑后的数据。 | 42| onCancel | () => void | 是 | - | 取消保存数据的回调。 | 43 44## GridObjectSortComponentOptions 45 46**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50| 名称 | 类型 | 必填 | 说明 | 51| -------------- | ------------------------- | ---- | ------------------------------------------------------ | 52| type | [GridObjectSortComponentType](#gridobjectsortcomponenttype) | 否 | 组件展示形态：文字\|图片+文字。<br />默认：GridObjectSortComponentType.text。 | 53| imageSize | number \| [Resource](ts-types.md#resource) | 否 | 图片的尺寸，单位vp。<br />取值范围：大于等于0。<br />默认值：56vp。 | 54| normalTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 未编辑状态下显示的标题。<br />默认值：频道。 | 55| showAreaTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 展示区域标题，第一个子标题。<br />默认值：长按拖动排序。 | 56| addAreaTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 添加区域标题，第二个子标题。<br />默认值：点击添加。 | 57| editTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 编辑状态下头部标题显示。<br />默认值：编辑。 | 58 59## GridObjectSortComponentType 60 61**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65| 名称 | 值 | 说明 | 66| -------- | ----- | -------------- | 67| IMAGE_TEXT | 'image_text' | 图片文字类型。 | 68| TEXT | 'text' | 文字类型。 | 69 70## GridObjectSortComponentItem 71 72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76| 名称 | 类型 | 必填 | 说明 | 77| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 78| id | number \| string | 是 | 数据id序号，不可重复。<br />默认值：空字符串。 | 79| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 显示文本信息。 | 80| selected | boolean | 是 | 是否已经被添加，添加：true，未添加：false。 | 81| url | [ResourceStr](ts-types.md#resourcestr) | 否 | GridObjectSortComponentType类型为IMAGE_TEXT时，需要传入图片地址。 | 82| order | number | 是 | 顺序序号。<br />取值范围：大于等于0。<br />默认值：0。 | 83 84## 事件 85 86不支持[通用事件](ts-component-general-events.md)。 87 88## 示例 89网格对象的编辑排序组件基础用法，涉及对组件配置信息初始化，数据初始化，保存、取消方法的使用。 90 91```ts 92import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI' 93 94@Entry 95@Component 96struct Index { 97 // 组件数据初始化 98 @State dataList: GridObjectSortComponentItem[] = [ 99 { 100 id: 0, 101 url: $r('sys.media.ohos_save_button_filled'), 102 text: '下载', 103 selected: true, 104 order: 3 105 }, 106 { 107 id: 1, 108 url: $r('sys.media.ohos_ic_public_web'), 109 text: '网路', 110 selected: true, 111 order: 9 112 }, 113 { 114 id: 2, 115 url: $r('sys.media.ohos_ic_public_video'), 116 text: '视频', 117 selected: false, 118 order: 1 119 } 120 ] 121 122 // 组件配置信息初始化 123 @State option: GridObjectSortComponentOptions = { 124 type: GridObjectSortComponentType.IMAGE_TEXT, 125 imageSize: 45, 126 normalTitle: '菜单', 127 editTitle: '编辑', 128 showAreaTitle: '长按拖动排序', 129 addAreaTitle: '点击添加' 130 } 131 132 build() { 133 Column() { 134 GridObjectSortComponent({ 135 options: this.option, 136 dataList: this.dataList, 137 // 保存编辑排序的回调函数，返回编辑后的数据。 138 onSave: ( 139 select: Array<GridObjectSortComponentItem>, 140 unselect: Array<GridObjectSortComponentItem> 141 ) => { 142 // save ToDo 143 }, 144 // 取消保存数据的回调。 145 onCancel: () =>{ 146 // cancel ToDo 147 } 148 }) 149 } 150 } 151} 152``` 153 154
