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