• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArcListItem
2
3The **ArcListItem** component is used to display individual child components in an [ArcList](ts-container-arclist.md) component and must be used in conjunction with **ArcList**.
4
5> **NOTE**
6>
7> - This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version.
8> - This component can be used only as a child of [ArcList](ts-container-arclist.md).
9> - When this component is used with [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md), its child components are created when it is created. When this component is used with [if/else](../../../quick-start/arkts-rendering-control-ifelse.md) or [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), or when the parent component is [ArcList](ts-container-arclist.md), its child components are created when it is laid out.
10
11## Modules to Import
12
13```ts
14import { ArcListItem, ArcListItemAttribute } from '@kit.ArkUI';
15```
16
17## Child Components
18
19This component can contain a single child component.
20
21## APIs
22
23### ArcListItem
24
25ArcListItem()
26
27Creates an item for the **ArcList** component.
28
29**Atomic service API**: This API can be used in atomic services since API version 18.
30
31**System capability**: SystemCapability.ArkUI.ArkUI.Circle
32
33## Attributes
34
35In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported.
36
37### autoScale
38
39autoScale(enable: Optional\<boolean>)
40
41Sets whether to enable auto-scaling for the **ArcListItem** component.
42
43**Atomic service API**: This API can be used in atomic services since API version 18.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Circle
46
47**Parameters**
48
49| Name| Type              | Mandatory| Description                                       |
50| ------ | ------------------ | ---- | ------------------------------------------- |
51| enable | Optional\<boolean> | Yes  | Whether to enable auto-scaling.<br>**true**: Enable auto-scaling.<br>**false**: Disable auto-scaling.<br>Default value: **true**.|
52
53### swipeAction
54
55swipeAction(options: Optional\<SwipeActionOptions>)
56
57Sets the swipe action item displayed when the **ArcListItem** component is swiped out from the screen edge.
58
59**Atomic service API**: This API can be used in atomic services since API version 18.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Circle
62
63**Parameters**
64
65| Name | Type                                                        | Mandatory| Description                   |
66| ------- | ------------------------------------------------------------ | ---- | ----------------------- |
67| options | [Optional\<SwipeActionOptions>](ts-container-listitem.md#swipeactionoptions9) | No  | Swipe action item displayed when the **ArcListItem** component is swiped out from the screen edge.|
68
69## Example
70
71This example demonstrates the visual differences when auto-scaling is enabled or disabled for child items in an **ArcList** component.
72
73```ts
74// xxx.ets
75import { LengthMetrics } from "@kit.ArkUI";
76import { ArcList, ArcListItem, ArcListAttribute, ArcListItemAttribute } from '@kit.ArkUI';
77
78@Entry
79@Component
80struct ArcListItemExample {
81  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
82  private watchSize: string = '466px' // Default watch size: 466*466
83  private itemSize: string = '414px' // Item width
84
85  @Builder
86  buildList() {
87    Stack() {
88      Column() {
89      }
90      .width(this.watchSize)
91      .height(this.watchSize)
92      .clip(new Circle({ width: '100%', height: '100%' }))
93      .backgroundColor(0x707070)
94
95      ArcList({ initialIndex: 3}) {
96        ForEach(this.arr, (item: number) => {
97          ArcListItem() {
98            Button('' + item, { type: ButtonType.Capsule })
99              .width(this.itemSize)
100              .height('70px')
101              .fontSize('40px')
102              .backgroundColor(0x17A98D)
103          }
104          .autoScale(item % 3 == 0 || item % 5 == 0)
105        }, (item: string) => item)
106      }
107      .space(LengthMetrics.px(10))
108      .borderRadius(this.watchSize)
109    }
110    .width(this.watchSize)
111    .height(this.watchSize)
112  }
113
114  build() {
115    Column() {
116      this.buildList()
117    }
118    .width('100%')
119    .height('100%')
120    .alignItems(HorizontalAlign.Center)
121    .justifyContent(FlexAlign.Center)
122  }
123}
124```
125
126![arkts-arclistitem](figures/arkts-arclistitem.png)
127