1# restoreId
2
3The **restoreId** attribute identifies a component in hopping scenarios. It can be used to restore the component to a specific state on a remote device.
4
5>  **NOTE**
6>
7>  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9## restoreId
10
11restoreId(value: number)
12
13Sets the ID of the component used for device matching during hopping.
14
15**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name| Type  | Mandatory| Description                                                        |
22| ------ | ------ | ---- | ------------------------------------------------------------ |
23| value  | number | Yes  | ID of the component used for device matching during hopping. This ID must be unique within an application.|
24
25## Components with Hopping Support
26
27| Name     | Initial API Version| Description                                    |
28| --------- | ---- | ---------------------------------------- |
29| List      | 8    | The index of the top list item on the current device is migrated to the remote device. After the migration, the corresponding list item is pinned to the top on the remote device.|
30| Grid      | 9    | The index of the top grid item on the current device is migrated to the remote device. After the migration, the corresponding grid item is pinned to the top on the remote device. Note that the position of the scrollbar cannot be migrated.|
31| Scroll    | 9    | The absolute scroll distance from the top edge is migrated. Be aware that layout differences between devices may affect hopping results.|
32| WaterFlow | 11   | The index of the top water flow item on the current device is migrated to the remote device. After the migration, the corresponding water flow item is pinned to the top on the remote device. The offset (in vp) of the top water flow item relative to the **WaterFlow** component along the main axis is also migrated.|
33
34## Example
35
36```ts
37// xxx.ets
38@Entry
39@Component
40struct RestoreIdExample {
41  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
42  build() {
43    Column() {
44      List({ space: 20 }) {
45        ForEach(this.arr, (item:number) => {
46          ListItem() {
47            Text('' + item)
48              .width('100%')
49              .height(100)
50              .fontSize(16)
51              .textAlign(TextAlign.Center)
52              .borderRadius(10)
53              .backgroundColor(Color.Pink)
54          }
55        }, (item:number) => (item.toString()))
56      }
57      .restoreId(1)
58    }
59  }
60}
61```
62