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
2021
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
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![GridObjectSortComponent](figures/GridObjectSortComponent.gif)