卡片自动居中的场景

设计场景

在横向滚动容器中，通过居中限位来突出中心卡片的详细信息和操作选项。为了确保屏幕朗读场景下聚焦卡片的可访问性，需要将获得焦点的卡片自动居中显示，以凸显其重要性。为此，需要应用通过ForEach或LazyForEach获取卡片索引，在可聚焦的卡片控件上注册无障碍聚焦回调函数onAccessibilityFocus，在回调函数中调用滚动容器的scrollToIndex接口并指定卡片索引，将聚焦的卡片控件居中显示。

开发实例

如下示例实现一个横向滚动容器，卡片被聚焦时自动居中显示：

class ListDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}

@Entry
@Component
struct Rule_2_1_18 {
  private arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
  private scrollerForList: Scroller = new Scroller();
  build() {
    Column() {
      List({ space: 20, initialIndex: 0, scroller: this.scrollerForList }) {
        LazyForEach(this.arr, (index: number) => {
          ListItem() {
            Text('' + index)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .width('60%') // 设置高占比item
          .onClick( () => {
            // 设置点击事件，使组件可被无障碍聚焦
          })
          // 设置无障碍聚焦回调
          .onAccessibilityFocus((isFocus: boolean) => {
            if (isFocus) {
              // 如果聚焦则滚动List，使当前的ListItem居中
              this.scrollerForList.scrollToIndex(index, false, ScrollAlign.CENTER)
            }
          })
        }, (item: string) => item)
      }.width('90%')
      .scrollBar(BarState.Off)
      .scrollSnapAlign(ScrollSnapAlign.CENTER) // 设置居中对齐
      .listDirection(Axis.Horizontal) // 设置横向list
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}