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