用于展示弧形列表的子组件，必须配合ArcList使用。
ArcListItemAttribute是用于配置ArcListItem组件属性的关键接口。API version 21及之前版本，导入ArcListItem组件后需要开发者手动导入ArcListItemAttribute，否则会编译报错。从API version 22开始，编译工具链识别到导入ArcListItem组件后，会自动导入ArcListItemAttribute，无需开发者手动导入ArcListItemAttribute。
如果开发者手动导入ArcListItemAttribute，DevEco Studio中该导入语句会显示为置灰状态。在API version 21及之前版本，删除该导入语句会导致编译报错；从API version 22开始，删除该导入语句对功能无影响。
API version 21及之前版本：
- import { ArcListItem, ArcListItemAttribute } from '@kit.ArkUI';
API version 22及之后版本：
- import { ArcListItem } from '@kit.ArkUI';
可以包含单个子组件。
ArcListItem()
创建弧形列表子组件。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Circle
除支持通用属性外，还支持以下属性：
autoScale(enable: Optional<boolean>)
用于设置ArcListItem是否自动缩放。开启后，ArcListItem会根据其在弧形列表中的位置自动调整显示尺寸。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Circle
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| enable | Optional<boolean> | 是 | ArcListItem是否支持自动缩放显示，true表示支持，false表示不支持。 默认值：true，支持自动缩放显示。 |
swipeAction(options: Optional<SwipeActionOptions>)
用于设置ArcListItem的划出操作。
元服务API： 从API version 18开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Circle
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | Optional<SwipeActionOptions> | 是 | ArcListItem划出操作的配置选项，具体配置请参考SwipeActionOptions对象说明。未设置时，不配置划出操作。 |
该示例展示了子项关闭自动缩放和开启自动缩放后的对比效果。
- // xxx.ets
- import { LengthMetrics, CircleShape } from '@kit.ArkUI';
- // 从API version 22开始，无需手动导入ArcListAttribute和ArcListItemAttribute。具体请参考ArcList、ArcListItem的导入模块说明。
- import { ArcList, ArcListItem, ArcListAttribute, ArcListItemAttribute } from '@kit.ArkUI';
-
- @Entry
- @Component
- struct ArcListItemExample {
- private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
- private watchSize: string = '466px'; // 手表默认宽高：466*466
- private itemSize: string = '414px'; // item宽度
-
- @Builder
- buildList() {
- Stack() {
- Column() {
- }
- .width(this.watchSize)
- .height(this.watchSize)
- .clipShape(new CircleShape({ width: '100%', height: '100%' }))
- .backgroundColor(0x707070)
-
- ArcList({ initialIndex: 3}) {
- ForEach(this.arr, (item: number) => {
- ArcListItem() {
- Button('' + item, { type: ButtonType.Capsule })
- .width(this.itemSize)
- .height('70px')
- .fontSize('40px')
- .backgroundColor(0x17A98D)
- }
- .autoScale(item % 3 == 0 || item % 5 == 0)
- }, (item: number) => item.toString())
- }
- .space(LengthMetrics.px(10))
- .borderRadius(this.watchSize)
- }
- .width(this.watchSize)
- .height(this.watchSize)
- }
-
- build() {
- Column() {
- this.buildList();
- }
- .width('100%')
- .height('100%')
- .alignItems(HorizontalAlign.Center)
- .justifyContent(FlexAlign.Center)
- }
- }
