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

HarmonyOS
2025-01-09 16:20:45
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

可以使用一个数组来记录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%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:50:26
相关问题
HarmonyOS List如何将背景色设置透明
171浏览 • 1回复 待解决
什么是权限子权限?
707浏览 • 1回复 待解决
如何在C++项目中使用pthread
2538浏览 • 1回复 待解决
HarmonyOS 关于权限的问题
505浏览 • 1回复 待解决
获取设置应用屏幕亮度值
1559浏览 • 1回复 待解决
HarmonyOS List列表滚动到指定位置
431浏览 • 1回复 待解决
HarmonyOS RN 项目中使用自定义字体
280浏览 • 1回复 待解决
ohpm publish 问题,该如何解决?
690浏览 • 1回复 待解决
如何设置分组列表的圆角间距
2311浏览 • 1回复 待解决