HarmonyOS List控制器Scroller相关

参考代码：

import {ListItemGroupExample} from './ListItemGroupExample'
@Entry
@Component
struct ListScrollerPage {
  @State message: string = 'Hello World';
  @State groupInfo:number[] = [0,0]

  onClickItem(item: number[]){
    this.groupInfo = item
  }

  build() {
    Row() {
      Column() {
        //头部布局
        RecommendDetailTopView()

        //内容区
        ListItemGroupExample({
          groupInfo:this.groupInfo
        })
          .layoutWeight(1)

        //头部布局
        CommnetBootomView({
          onClickItem: (item: number[]): void => this.onClickItem(item)
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}


@Component
struct RecommendDetailTopView{
  build() {
    Row(){
      Text('头部布局')
    }
  }
}

@Component
struct CommnetBootomView{
  @State list:number[][] = [[1,1],[2,1],[3,2]]
  private onClickItem = (item: number[]) => {};
  build() {
    Row(){
      ForEach(this.list,(item:number[])=>{
        Row(){
          ForEach(item,(num:number)=>{
            Text(`${num}`)
              .margin({
                right:5
              })
          },(num:number,index:number)=>JSON.stringify(index))
        }
        .backgroundColor(Color.Pink)
        .onClick(()=>{
          if(this.onClickItem){
            this.onClickItem(item)
          }
        })
      },(item:number[])=>JSON.stringify(item))

    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
    .padding(10)
  }
}
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.

//ListItemGroupExample文件
// xxx.ets
@Entry
@Component
export struct ListItemGroupExample {
  private scrollerForList: ListScroller = new ListScroller()
  private timeTable: TimeTable[] = [
    {
      title: '星期一',
      projects: ['语文', '数学', '英语']
    },
    {
      title: '星期二',
      projects: ['物理', '化学', '生物']
    },
    {
      title: '星期三',
      projects: ['历史', '地理', '政治']
    },
    {
      title: '星期四',
      projects: ['美术', '音乐', '体育']
    }
  ]

  @Link @Watch('groupInfoChange') groupInfo:number[]

  groupInfoChange(){
    console.log(JSON.stringify(this.groupInfo))
    this.scrollerForList.scrollToItemInGroup(this.groupInfo[0],this.groupInfo[1],true)
  }

  @Builder
  itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }

  @Builder
  itemFoot(num: number) {
    Text('共' + num + "节课")
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(5)
  }

  build() {
    Column() {
      List({ space: 20, scroller: this.scrollerForList }) {
        ForEach(this.timeTable, (item: TimeTable) => {
          ListItemGroup({ header: this.itemHead(item.title), footer: this.itemFoot(item.projects.length) }) {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height(100)
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(0xFFFFFF)
              }
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 1, color: Color.Blue }) // 每行之间的分界线
        })
      }
      .width('90%')
      // .height(300)
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

interface TimeTable {
  title: string;
  projects: string[];
}
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.