在HarmonyOS NEXT开发中List控制器Scroller相关？

Question

在HarmonyOS NEXT开发中List控制器Scroller相关？想通过List中的控制器来控制滑动到具体的Item上例如 this.scrollerForList.scrollToItemInGroup(1,2,true)目前的问题是，一个主布局中有三个子布局，具体描述如图所示；当前我使用的方法是通过emmiter来通知内容布局去进行滑动，但是会报错，如图所示；希望能给出一些建议和其他方法实现

Answer 1

可以参考代码：

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) 
  } 
}
//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[]; 
}