• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArcListItem
2
3<!--Kit: ArkUI-->
4<!--Subsystem: ArkUI-->
5<!--Owner: @yylong-->
6<!--Designer: @yylong-->
7<!--Tester: @liuzhenshuo-->
8<!--Adviser: @HelloCrease-->
9
10用来展示列表具体子组件，必须配合[ArcList](ts-container-arclist.md)来使用。
11
12> **说明：**
13>
14> - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
15> - 该组件的父组件只能是[ArcList](ts-container-arclist.md)。
16> - 当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布局时创建。
17
18## 导入模块
19
20```ts
21import { ArcListItem, ArcListItemAttribute } from '@kit.ArkUI';
22```
23
24## 子组件
25
26可以包含单个子组件。
27
28## 接口
29
30### ArcListItem
31
32ArcListItem()
33
34创建弧形列表子组件。
35
36**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
37
38**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
39
40## 属性
41
42除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
43
44### autoScale
45
46autoScale(enable: Optional\<boolean>)
47
48用于设置ArcListItem是否支持自动缩放显示。
49
50**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
51
52**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
53
54**参数：**
55
56| 参数名 | 类型               | 必填 | 说明                                        |
57| ------ | ------------------ | ---- | ------------------------------------------- |
58| enable | Optional\<boolean> | 是   | ArcListItem是否支持自动缩放显示，true表示支持自动缩放显示，false表示不支持自动缩放显示。<br/>默认值：true，支持自动缩放显示。 |
59
60### swipeAction
61
62swipeAction(options: Optional\<SwipeActionOptions>)
63
64用于设置ArcListItem的划出组件。
65
66**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
67
68**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
69
70**参数：**
71
72| 参数名  | 类型                                                         | 必填 | 说明                    |
73| ------- | ------------------------------------------------------------ | ---- | ----------------------- |
74| options | [Optional\<SwipeActionOptions>](ts-container-listitem.md#swipeactionoptions9对象说明) | 是   | ArcListItem的划出组件。 |
75
76## 示例
77
78该示例展示了子项关闭自动缩放和开启自动缩放后的对比效果。
79
80```ts
81// xxx.ets
82import { LengthMetrics, CircleShape } from '@kit.ArkUI';
83import { ArcList, ArcListItem, ArcListAttribute, ArcListItemAttribute } from '@kit.ArkUI';
84
85@Entry
86@Component
87struct ArcListItemExample {
88  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
89  private watchSize: string = '466px'; // 手表默认宽高：466*466
90  private itemSize: string = '414px'; // item宽度
91
92  @Builder
93  buildList() {
94    Stack() {
95      Column() {
96      }
97      .width(this.watchSize)
98      .height(this.watchSize)
99      .clipShape(new CircleShape({ width: '100%', height: '100%' }))
100      .backgroundColor(0x707070)
101
102      ArcList({ initialIndex: 3}) {
103        ForEach(this.arr, (item: number) => {
104          ArcListItem() {
105            Button('' + item, { type: ButtonType.Capsule })
106              .width(this.itemSize)
107              .height('70px')
108              .fontSize('40px')
109              .backgroundColor(0x17A98D)
110          }
111          .autoScale(item % 3 == 0 || item % 5 == 0)
112        }, (item: number) => item.toString())
113      }
114      .space(LengthMetrics.px(10))
115      .borderRadius(this.watchSize)
116    }
117    .width(this.watchSize)
118    .height(this.watchSize)
119  }
120
121  build() {
122    Column() {
123      this.buildList();
124    }
125    .width('100%')
126    .height('100%')
127    .alignItems(HorizontalAlign.Center)
128    .justifyContent(FlexAlign.Center)
129  }
130}
131```
132
133![arkts-arclistitem](figures/arkts-arclistitem.png)