restoreId

The restoreId attribute identifies a component in hopping scenarios. It can be used to restore the component to a specific state on a remote device.

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

restoreId

restoreId(value: number)

Sets the ID of the component used for device matching during hopping.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number	Yes	ID of the component used for device matching during hopping. This ID must be unique within an application.

Components with Hopping Support

Name	Initial API Version	Description
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.
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.
Scroll	9	The absolute scroll distance from the top edge is migrated. Be aware that layout differences between devices may affect hopping results.
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.

Example

This example demonstrates how to use restoreId to set the ID of the List component for device matching during hopping.

// xxx.ets
@Entry
@Component
struct RestoreIdExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.arr, (item:number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.Pink)
          }
        }, (item:number) => (item.toString()))
      }
      .restoreId(1)
    }
  }
}