HarmonyOS6 ArkTS List 组件限位对齐实战

核心概念：List 限位对齐

在 HarmonyOS 开发中，scrollSnapAlign 是 List 组件的关键属性，用于控制列表滚动停止后的子项吸附位置。简单来说，就是当用户滑动列表松手后，列表会自动'吸'到预设的某个位置（如中心、顶部或底部），这种交互能显著提升长列表的阅读体验。

枚举值说明

该属性支持三种配置模式，对应不同的对齐逻辑：

• ScrollSnapAlign.START：子项吸附到列表起始位置（左侧或顶部）。
• ScrollSnapAlign.CENTER：子项吸附到列表中心位置（最常用）。
• ScrollSnapAlign.END：子项吸附到列表结束位置（右侧或底部）。

生效前提

要让限位对齐正常工作，有几个硬性条件需要注意：

1. List 必须处于可滚动状态，即内容超出容器可视区域。
2. 需配合 listDirection 使用，水平或垂直列表均支持。
3. ListItem 建议设置固定宽高，否则对齐效果可能不明显。

完整代码示例

下面是一个可直接运行的 ArkTS 示例，实现了水平列表的居中限位对齐效果。代码中包含了数据初始化、列表配置及样式细节。

// HarmonyOS ArkTS
import { ListDataSource } from './ListDataSource';

@Entry
@Component
struct ListExample {
  private arr: ListDataSource = new ListDataSource([]);
  private scrollerForList: Scroller = new Scroller();

  aboutToAppear() {
    let list: number[] = [];
    for (let i = 0; i < 20; i++) {
      list.push(i);
    }
    this.arr = new ListDataSource(list);
  }

  build() {
    Column() {
      Row() {
        List({ space: 20, initialIndex: 3, scroller: this.scrollerForList }) {
          LazyForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
            }
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
            .width('60%')
            .height('80%')
          }, (item: number) => JSON.stringify(item))
        }
        .chainAnimation(true)
        .edgeEffect(EdgeEffect.Spring)
        .listDirection(Axis.Horizontal)
        .height('100%')
        .width('100%')
        .scrollSnapAlign(ScrollSnapAlign.CENTER)
        .borderRadius(10)
        .backgroundColor(0xDCDCDC)
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
      .padding({ top: 10 })
    }
  }
}

运行后的界面效果如下：