@Entry
@ComponentV2
struct Parent {

    @Local arr : Array<string> = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z" ];
   // @Local arr : Array<string> = [ "A", "B", "C", "D" ];

  scroller: Scroller = new Scroller();

    build() {
        Column() {

                Row() {
                    Button('Scroll top')
                        .height(100)
                        .onClick(() => {
                            this.scroller.scrollToIndex( 0)
                            console.error("=============== after scroll to index 0")
                        })
                    Button('Scroll mid')
                        .height(100)
                        .onClick(() => {
                            this.scroller.scrollToIndex(10)
                            console.error("=============== after scroll to index 10")
                  })
                }

            List({ space: 3, scroller: this.scroller }) {
                Repeat(this.arr)
                        .virtualScroll({ totalCount: this.arr.length })
                        .key((item) => item)
                        .each((r) => {
                                ListItem() {
                                Text(`${r.index+1}. Item ${r.item}`)
                                    .height(50).backgroundColor(Color.Blue).fontColor(Color.White)
                                }.backgroundColor(Color.Green)
                            })
                
            }.height(200).backgroundColor(Color.Red)

            Text("After").height(50).width("100%").backgroundColor(Color.Yellow)
        }
    }
}