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-universal-attributes-size.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) | 否 | 图片的尺寸。<br />默认值:56。 | 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序号,不可重复。 | 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 | 是 | 顺序序号。 | 83 84## 事件 85 86不支持[通用事件](ts-universal-events-click.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('app.media.ic_controlcenter_location_filled'), 102 text: '位置信息', 103 selected: true, 104 order: 3 105 }, 106 { 107 id: 1, 108 url: $r('app.media.ic_controlcenter_mobiledata_filled'), 109 text: '移动数据', 110 selected: true, 111 order: 9 112 }, 113 { 114 id: 2, 115 url: $r('app.media.ic_controlcenter_nfc_filled'), 116 text: 'NFC', 117 selected: false, 118 order: 1 119 }, 120 { 121 id: 3, 122 url: $r('app.media.ic_controlcenter_ring_off_filled'), 123 text: '响铃关闭', 124 selected: true, 125 order: 4 126 }, 127 { 128 id: 4, 129 url: $r('app.media.ic_controlcenter_ring_on_filled'), 130 text: '响铃', 131 selected: false, 132 order: 5 133 }, 134 { 135 id: 5, 136 url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'), 137 text: '低电量模式', 138 selected: true, 139 order: 6 140 }, 141 { 142 id: 6, 143 url: $r('app.media.ic_controlcenter_screenshot_filled'), 144 text: '截屏', 145 selected: true, 146 order: 7 147 }, 148 { 149 id: 7, 150 url: $r('app.media.ic_controlcenter_screen_recording_filled'), 151 text: '屏幕录制', 152 selected: true, 153 order: 8 154 }, 155 { 156 id: 8, 157 url: $r('app.media.ic_controlcenter_super_power_saver_filled'), 158 text: '超级省电', 159 selected: false, 160 order: 9 161 }, 162 ] 163 164 // 组件配置信息初始化 165 @State option: GridObjectSortComponentOptions = { 166 type: GridObjectSortComponentType.IMAGE_TEXT, 167 imageSize: 45, 168 normalTitle: '菜单', 169 editTitle: '编辑', 170 showAreaTitle: '长按拖动排序', 171 addAreaTitle: '点击添加' 172 } 173 174 build() { 175 Column() { 176 GridObjectSortComponent({ 177 options: this.option, 178 dataList: this.dataList, 179 // 保存编辑排序的回调函数,返回编辑后的数据。 180 onSave: ( 181 select: Array<GridObjectSortComponentItem>, 182 unselect: Array<GridObjectSortComponentItem> 183 ) => { 184 // save ToDo 185 }, 186 // 取消保存数据的回调。 187 onCancel: () =>{ 188 // cancel ToDo 189 } 190 }) 191 } 192 } 193} 194``` 195 196