鸿蒙6.0开发常见问题【List控件加载的数据如何判断是否超过一屏？】

鸿蒙绿头鱼

376人浏览 · 2025-06-27 19:34:17

鸿蒙绿头鱼 · 2025-06-27 19:34:17 发布

1.通过行高计算

@Entry
@Component
struct AllListItemHeight {
  private itemHeightArr = [100, 150, 200, 130, 120, 110.130];
  private listHeight = 700;
  scroller = new ListScroller();




  build() {
    Column() {
      Button('Is it more than one screen')
        .height(50)
        .width('100%')
        .onClick(() => {
          let result = 0;
          for (let i = 0; i < this.itemHeightArr.length; i++) {
            result += this.itemHeightArr[i];
          }
          console.info(result > this.listHeight ? 'More than one screen' : 'Not exceeding one screen');
        })
      List({ scroller: this.scroller }) {
        ForEach(this.itemHeightArr, (_: number, index: number) => {
          ListItem() {
            Text(index.toString())
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .height(this.itemHeightArr[index])
          .align(Alignment.Center)
        }, (item: number) => JSON.stringify(item))
      }
      .height(this.listHeight)
      .width('100%')
    }
  }
}

2.通过getItemRect(index: number): RectResult获取子组件的大小位置，可以获取最后一个ListItem的位置大小信息进行计算

@Entry
@Component
struct GetLastItem {
  private itemHeightArr = [100, 150, 200, 130, 120, 110.130];
  private listHeight = 700;
  scroller = new ListScroller();




  build() {
    Column() {
      Button('Is it more than one screen')
        .height(50)
        .width('100%')
        .onClick(() => {
          let result = this.scroller.getItemRect(this.itemHeightArr.length - 1);
          let flag = result.x == 0 && result.y == 0 && result.width == 0 && result.height == 0
          console.info(flag ? 'More than one screen' : 'Not exceeding one screen')
        })
      List({ scroller: this.scroller }) {
        ForEach(this.itemHeightArr, (_: number, index: number) => {
          ListItem() {
            Text(index.toString())
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .height(this.itemHeightArr[index])
          .align(Alignment.Center)
        }, (item: number) => JSON.stringify(item))
      }
      .height(this.listHeight)
      .width('100%')
    }
  }
}

3.通过getItemRectInGroup(index: number, indexInGroup: number): RectResult，获取最后一个ListItemGroup中的最后一个ListItem的大小和相对于List的位置进行计算

@Entry
@Component
struct GetLastGroup {
  private groupItemHeightArr =
    [[30, 50, 60, 40, 90, 80.60],
      [50, 40, 50, 55, 77, 88.44],];
  private listHeight = 700;
  scroller = new ListScroller();




  build() {
    Column() {
      Button('Is it more than one screen')
        .height(50)
        .width('100%')
        .onClick(() => {
          let lastGroupIndex = this.groupItemHeightArr.length - 1;
          let lastItemIndex = this.groupItemHeightArr[lastGroupIndex].length - 1;
          let result = this.scroller.getItemRectInGroup(lastGroupIndex, lastItemIndex);
          let flag = result.x == 0 && result.y == 0 && result.width == 0 && result.height == 0
          console.info(flag ? 'More than one screen' : 'Not exceeding one screen')
        })
      List({ scroller: this.scroller }) {
        ForEach(this.groupItemHeightArr, (itemHeight: number[], index: number) => {
          ListItemGroup() {
            ForEach(itemHeight, (height: number) => {
              ListItem() {
                Text(index.toString())
                  .width('100%')
                  .textAlign(TextAlign.Center)
              }
              .height(height)
              .align(Alignment.Center)
            }, (item: number, index: number) => JSON.stringify(item) + index)
          }
        }, (item: number[]) => JSON.stringify(item))
      }
      .height(this.listHeight)
      .width('100%')
    }
  }
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

在这里插入图片描述