ArkUI ArcList：圆形屏列表别按直屏思路硬套

今天我们看一个更特殊的列表：ArcList。它主要面向圆形屏幕，适合穿戴设备这类场景。

这篇只做能力展示。我们不假设你当前设备就是圆形屏，也不讲表冠事件、横滑操作和懒加载，先把最基础的结构看明白。

先引入 ArcList

ArcList 在当前 SDK 里通过 @kit.ArkUI 导出，所以页面顶部要写：

import { ArcList, ArcListItem, LengthMetrics } from '@kit.ArkUI';

LengthMetrics 用来给 space() 传 vp 单位的间距。这个细节很容易被忽略，直接写数字不一定符合当前声明。

用 ArcListItem 包住每一项

核心结构还是列表，只是子项换成了 ArcListItem：

ArcList() {
  ForEach(this.items, (item: ArcMenuItem, index: number) => {
    ArcListItem() {
      this.arcRow(item)
    }
    .autoScale(index !== 2)
  }, (item: ArcMenuItem) => item.title)
}
.space(LengthMetrics.vp(14))
.scrollBar(BarState.Auto)

autoScale 控制项目靠近边缘时是否跟着缩放。圆形屏上这类视觉变化更常见，直屏列表一般不会这么处理。

别把 ArcList 当普通直屏列表硬套

如果你的目标页面就是手机上的长列表，大概率继续用 List。ArcList 的价值在于它服务圆形屏阅读方式：边缘、中心、滚动节奏都和直屏不一样。

你见过哪些穿戴设备页面特别适合做成弧形列表？比如运动、健康、设置，还是通知？可以拿一个你熟悉的场景改改这个 Demo。

完整代码

import { ArcList, ArcListItem, LengthMetrics } from '@kit.ArkUI';

class ArcMenuItem {
  title: string = '';
  desc: string = '';
  color: string = '';

  constructor(title: string, desc: string, color: string) {
    this.title = title;
    this.desc = desc;
    this.color = color;
  }
}

@Entry
@Component
struct ArkUIArcListDemo {
  private items: ArcMenuItem[] = [
    new ArcMenuItem('健康', '今日概览', '#2563EB'),
    new ArcMenuItem('运动', '步数记录', '#0F766E'),
    new ArcMenuItem('音乐', '继续播放', '#7C3AED'),
    new ArcMenuItem('天气', '出门看看', '#C2410C'),
    new ArcMenuItem('提醒', '别忘事情', '#1D4ED8'),
    new ArcMenuItem('设置', '快速调整', '#334155')
  ];

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  arcRow(item: ArcMenuItem) {
    Row({ space: 10 }) {
      Text(item.title.substring(0, 1))
        .width(40)
        .height(40)
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#FFFFFF')
        .textAlign(TextAlign.Center)
        .backgroundColor(item.color)
        .borderRadius(20)

      Column({ space: 4 }) {
        Text(item.title)
          .fontSize(15)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text(item.desc)
          .fontSize(12)
          .fontColor('#64748B')
      }
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height(68)
    .padding({ left: 14, right: 14 })
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E2E8F0' })
    .borderRadius(34)
    .alignItems(VerticalAlign.Center)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI ArcList')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('圆形屏列表别按直屏思路硬套')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('ArcList 更适合圆形屏幕上的纵向列表。这里做一个普通展示，重点看 ArcListItem、项目间距、autoScale 和滚动条，不把它写成复杂业务列表。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('圆形屏先留出弧形浏览空间', 'ArcList 的项目依旧用 ArcListItem 包起来。space 用 LengthMetrics.vp 传入，方便表达 vp 单位的间距。')

          ArcList() {
            ForEach(this.items, (item: ArcMenuItem, index: number) => {
              ArcListItem() {
                this.arcRow(item)
              }
              .autoScale(index !== 2)
            }, (item: ArcMenuItem) => item.title)
          }
          .space(LengthMetrics.vp(14))
          .width('100%')
          .height(360)
          .scrollBar(BarState.Auto)
          .padding({ left: 18, right: 18, top: 12, bottom: 12 })
          .backgroundColor('#FFFFFF')
          .border({ width: 1, color: '#CCFBF1' })
          .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('autoScale 可以控制边缘缩放感', '圆形屏列表靠近上下边缘时会有缩放效果。个别项目可以关闭 autoScale，让它保持原尺寸。')

          Row({ space: 10 }) {
            Text('autoScale: true')
              .layoutWeight(1)
              .height(44)
              .fontSize(13)
              .fontWeight(700)
              .fontColor('#0F766E')
              .textAlign(TextAlign.Center)
              .backgroundColor('#CCFBF1')
              .borderRadius(8)

            Text('autoScale: false')
              .layoutWeight(1)
              .height(44)
              .fontSize(13)
              .fontWeight(700)
              .fontColor('#7C2D12')
              .textAlign(TextAlign.Center)
              .backgroundColor('#FED7AA')
              .borderRadius(8)
          }
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}