• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArcListItem
2
3用来展示列表具体子组件，必须配合[ArcList](ts-container-arclist.md)来使用。
4
5> **说明：**
6>
7> - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8> - 该组件的父组件只能是[ArcList](ts-container-arclist.md)。
9> - 当ArcListItem配合[LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md)使用时，ArcListItem子组件在ArcListItem创建时创建。配合[if/else](../../../ui/state-management/arkts-rendering-control-ifelse.md)、[ForEach](../../../ui/state-management/arkts-rendering-control-foreach.md)使用时，或父组件为[ArcList](ts-container-arclist.md)时，ArcListItem子组件在ArcListItem布局时创建。
10
11## 导入模块
12
13```ts
14import { ArcListItem, ArcListItemAttribute } from '@kit.ArkUI';
15```
16
17## 子组件
18
19可以包含单个子组件。
20
21## 接口
22
23### ArcListItem
24
25ArcListItem()
26
27创建弧形列表子组件。
28
29**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
30
31**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
32
33## 属性
34
35除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
36
37### autoScale
38
39autoScale(enable: Optional\<boolean>)
40
41用于设置ArcListItem是否支持自动缩放显示。
42
43**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
44
45**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
46
47**参数：**
48
49| 参数名 | 类型               | 必填 | 说明                                        |
50| ------ | ------------------ | ---- | ------------------------------------------- |
51| enable | Optional\<boolean> | 是   | ArcListItem是否支持自动缩放显示，true表示支持自动缩放显示，false表示不支持自动缩放显示。<br/>默认值：true，支持自动缩放显示。 |
52
53### swipeAction
54
55swipeAction(options: Optional\<SwipeActionOptions>)
56
57用于设置ArcListItem的划出组件。
58
59**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
60
61**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
62
63**参数：**
64
65| 参数名  | 类型                                                         | 必填 | 说明                    |
66| ------- | ------------------------------------------------------------ | ---- | ----------------------- |
67| options | [Optional\<SwipeActionOptions>](ts-container-listitem.md#swipeactionoptions9对象说明) | 否   | ArcListItem的划出组件。 |
68
69## 示例
70
71该示例展示了子项关闭自动缩放和开启自动缩放后的对比效果。
72
73```ts
74// xxx.ets
75import { LengthMetrics, CircleShape } 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' // 手表默认宽高：466*466
83  private itemSize: string = '414px' // item宽度
84
85  @Builder
86  buildList() {
87    Stack() {
88      Column() {
89      }
90      .width(this.watchSize)
91      .height(this.watchSize)
92      .clipShape(new CircleShape({ 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)