HarmonyOS List控制器Scroller相关

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

HarmonyOS  List控制器Scroller相关  -鸿蒙开发者社区HarmonyOS  List控制器Scroller相关  -鸿蒙开发者社区

HarmonyOS
6h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

参考代码:

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[];
}
分享
微博
QQ
微信
回复
4h前
相关问题
什么是控制器controller
837浏览 • 1回复 待解决
HarmonyOS video空间自定义控制器
299浏览 • 1回复 待解决
HarmonyOS 列表List相关问题
443浏览 • 1回复 待解决
HarmonyOS List滑动速度是否能控制
280浏览 • 1回复 待解决
两个设备控制相关问题
9055浏览 • 3回复 已解决