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&nbsp;\|&nbsp;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```ts
91import { GridObjectSortComponent, GridObjectSortComponentItem, GridObjectSortComponentOptions, GridObjectSortComponentType } from '@kit.ArkUI'
92
93@Entry
94@Component
95struct Index {
96  @State dataList: GridObjectSortComponentItem[] = [
97    {
98      id: 0,
99      url: $r('app.media.ic_controlcenter_location_filled'),
100      text: '位置信息',
101      selected: true,
102      order: 3
103    },
104    {
105      id: 1,
106      url: $r('app.media.ic_controlcenter_mobiledata_filled'),
107      text: '移动数据',
108      selected: true,
109      order: 9
110    },
111    {
112      id: 2,
113      url: $r('app.media.ic_controlcenter_nfc_filled'),
114      text: 'NFC',
115      selected: false,
116      order: 1
117    },
118    {
119      id: 3,
120      url: $r('app.media.ic_controlcenter_ring_off_filled'),
121      text: '响铃关闭',
122      selected: true,
123      order: 4
124    },
125    {
126      id: 4,
127      url: $r('app.media.ic_controlcenter_ring_on_filled'),
128      text: '响铃',
129      selected: false,
130      order: 5
131    },
132    {
133      id: 5,
134      url: $r('app.media.ic_controlcenter_ultra_power_saver_filled'),
135      text: '低电量模式',
136      selected: true,
137      order: 6
138    },
139    {
140      id: 6,
141      url: $r('app.media.ic_controlcenter_screenshot_filled'),
142      text: '截屏',
143      selected: true,
144      order: 7
145    },
146    {
147      id: 7,
148      url: $r('app.media.ic_controlcenter_screen_recording_filled'),
149      text: '屏幕录制',
150      selected: true,
151      order: 8
152    },
153    {
154      id: 8,
155      url: $r('app.media.ic_controlcenter_super_power_saver_filled'),
156      text: '超级省电',
157      selected: false,
158      order: 9
159    },
160  ]
161
162  @State option: GridObjectSortComponentOptions = {
163    type: GridObjectSortComponentType.IMAGE_TEXT,
164    imageSize: 45,
165    normalTitle: '菜单',
166    editTitle: '编辑',
167    showAreaTitle: '长按拖动排序',
168    addAreaTitle: '点击添加'
169  }
170
171  build() {
172    Column() {
173      GridObjectSortComponent({
174        options: this.option,
175        dataList: this.dataList,
176        onSave: (
177          select: Array<GridObjectSortComponentItem>,
178          unselect: Array<GridObjectSortComponentItem>
179        ) => {
180          // save ToDo
181        },
182        onCancel: () =>{
183          // cancel ToDo
184        }
185      })
186    }
187  }
188}
189```
190
191![GridObjectSortComponent](figures/GridObjectSortComponent.gif)