1# @ohos.arkui.advanced.GridObjectSortComponent (网格对象的编辑排序) 2 3 4网格对象的编辑排序是用于网格对象的编辑、拖动排序、新增和删除。 5 6 7> **说明：** 8> 9> 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11 12## 导入模块 13 14```ts 15import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType }from '@ohos.arkui.advanced.GridObjectSortComponent' 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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数**： 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| build() | void | - | 是 | 构建函数。 | 44 45 46## GridObjectSortComponentOptions 47 48| 名称 | 类型 | 必填 | 说明 | 49| -------------- | ------------------------- | ---- | ------------------------------------------------------ | 50| type | [GridObjectSortComponentType](#gridobjectsortcomponenttype) | 否 | 组件展示形态：文字\|图片+文字。<br />默认：GridObjectSortComponentType.text。 | 51| imageSize | number \| [Resource](ts-types.md#resource) | 否 | 图片的尺寸。<br />默认值：56。 | 52| normalTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 未编辑状态下显示的标题。<br />默认：频道。 | 53| showAreaTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 展示区域标题，第一个子标题。<br />默认：长按拖动排序。 | 54| addAreaTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 添加区域标题，第二个子标题。<br />默认：点击添加。 | 55| editTitle | [ResourceStr](ts-types.md#resourcestr) | 否 | 编辑状态下头部标题显示。<br />默认：编辑。 | 56 57 58## GridObjectSortComponentType 59 60| 名称 | 类型 | 值 | 说明 | 61| -------- | ------ | ------------ | -------------- | 62| IMAGE_TEXT | string | 'image_text' | 图片文字类型。 | 63| TEXT | string | 'text' | 文字类型。 | 64 65 66## GridObjectSortComponentItem 67 68| 名称 | 类型 | 必填 | 说明 | 69| -------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 70| id | string \| number | 是 | 数据id序号，不可重复。 | 71| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 显示文本信息。 | 72| selected | boolean | 是 | 是否已经被添加，添加：true，未添加：false。 | 73| url | [ResourceStr](ts-types.md#resourcestr) | 否 | GridObjectSortComponentType类型为IMAGE_TEXT时，需要传入图片地址。 | 74| order | number | 是 | 顺序序号。 | 75 76## 事件 77 78不支持[通用事件](ts-universal-events-click.md)。 79 80## 示例 81 82```ts 83import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@ohos.arkui.advanced.GridObjectSortComponent' 84@Entry 85@Component 86struct Index { 87 @State dataList: GridObjectSortComponentItem[] = [ 88 { 89 id: 0, 90 url: $r('app.media.ic_controlcenter_location_filled'), 91 text: '位置信息', 92 selected: true, 93 order: 3 94 }, 95 { 96 id: 1, 97 url: $r('app.media.ic_controlcenter_mobiledata_filled'), 98 text: '移动数据', 99 selected: true, 100 order: 9 101 }, 102 { 103 id: 2, 104 url: $r('app.media.ic_controlcenter_nfc_filled'), 105 text: 'NFC', 106 selected: false, 107 order: 1 108 }, 109 { 110 id: 3, 111 url: $r('app.media.ic_controlcenter_ring_off_filled'), 112 text: '响铃关闭', 113 selected: true, 114 order: 4 115 }, 116 { 117 id: 4, 118 url: $r('app.media.ic_controlcenter_ring_on_filled'), 119 text: '响铃', 120 selected: false, 121 order: 5 122 }, 123 { 124 id: 5, 125 url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'), 126 text: '低电量模式', 127 selected: true, 128 order: 6 129 }, 130 { 131 id: 6, 132 url: $r('app.media.ic_controlcenter_screenshot_filled'), 133 text: '截屏', 134 selected: true, 135 order: 7 136 }, 137 { 138 id: 7, 139 url: $r('app.media.ic_controlcenter_screen_recording_filled'), 140 text: '屏幕录制', 141 selected: true, 142 order: 8 143 }, 144 { 145 id: 8, 146 url: $r('app.media.ic_controlcenter_super_power_saver_filled'), 147 text: '超级省电', 148 selected: false, 149 order: 9 150 }, 151 ] 152 153 @State option: GridObjectSortComponentOptions = { 154 type: GridObjectSortComponentType.IMAGE_TEXT, 155 imageSize: 45, 156 normalTitle: '菜单', 157 editTitle: '编辑', 158 showAreaTitle: '长按拖动排序', 159 addAreaTitle: '点击添加' 160 } 161 162 build() { 163 Column() { 164 GridObjectSortComponent({ 165 options: this.option, 166 dataList: this.dataList, 167 onSave: ( 168 select: Array<GridObjectSortComponentItem>, 169 unselect: Array<GridObjectSortComponentItem> 170 ) => { 171 // save ToDo 172 }, 173 onCancel: () =>{ 174 // cancel ToDo 175 } 176 }) 177 } 178 } 179} 180``` 181 182
