HarmonyOS 项目中使用分组列表listgroup，已知groupIndex和组内元素itemIndex，如何将该组内元素滚动到屏幕中间

可以使用一个数组来记录List中当前显示的ListItem，根据ListItem的Index和当前List控件滚动的距离可以获取到显示的ListItem距离屏幕中间的距离，scrollToItemInGroup滑动到指定的ListItemGroup。

参考示例如下：

import { ComponentContent, NodeContent } from "@kit.ArkUI"
import { typeNode } from '@ohos.arkui.node';
import { authPageComponent } from './b';


@Entry
@Component
struct Index {
  @State message: string = "HELLO"
  private content: NodeContent = new NodeContent();

  build() {
    Row() {
      Column() {
        Button('addComponentContent')
          .onClick(() => {
            let column = typeNode.createNode(this.getUIContext(), "Column");
            column.initialize();
            column.addComponentContent(new ComponentContent(this.getUIContext(),
              wrapBuilder(authPageComponent)))
            this.content.addFrameNode(column);
          })
        ContentSlot(this.content)
      }
      .id("column")
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

@Component
struct ListDemoPage {
  scroller: Scroller = new Scroller()
  imgList: Resource[] = []
  @State endIndex: number = -1
  @State trackArr: number[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 11; i++) {
      this.imgList.push($r('app.media.preview'))
    }
  }

  build() {
    Column() {
      List({ scroller: this.scroller, space: 10 }) {
        ForEach(this.imgList, (item: Resource, index: number) => {
          ListItem() {
            Image(item).width(350).height('100%').objectFit(ImageFit.Contain).borderRadius(4)
          }
          .height(500)
          .backgroundColor(Color.Gray)
          .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
            if (isVisible && currentRatio >= 1.0) {
              if (this.trackArr.indexOf(index) === -1) {
                this.trackArr.push(index)
              }
            }
            if (!isVisible) {
              if (this.trackArr.indexOf(index) > -1) {
                this.trackArr.splice(this.trackArr.indexOf(index), 1)
              }
            }
          })
        }, (item: Resource) => JSON.stringify(item))
      }
      .onScrollIndex((first: number, end: number, center: number) => {
        this.endIndex = center
      })
      .onScrollStop(() => {
        console.log('result array ==> ' + JSON.stringify(this.trackArr))
      })
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
      .edgeEffect(EdgeEffect.None)
      .backgroundColor(Color.Transparent)
    }.width('100%').height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.