HarmonyOS 鸿蒙Next list超出屏幕长度，拉不到尽头应该如何处理？

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next list超出屏幕长度，拉不到尽头应该如何处理？

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      List() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(50)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

代码中的list，拉到最后，有回弹动画，但最后一个item显示不完全，这个怎么处理？


更多关于HarmonyOS 鸿蒙Next list超出屏幕长度，拉不到尽头应该如何处理？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

可以参考

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Flex({ direction: FlexDirection.Column }) {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      List() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(50)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
      .flexGrow(1)
      .flexShrink(1)
      .flexBasis(1)
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next list超出屏幕长度，拉不到尽头应该如何处理？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以使用Flex 代替 Column，可使用如下代码实现解决：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
    Flex({ direction: FlexDirection.Column }) {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      List() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20], (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(50)
              .fontSize(16)
              .textAlign(TextAlign.Center)
          }
        }, (item: number) => item.toString())
      }
      .width('100%')
      .flexGrow(1)
      .flexShrink(1)
      .flexBasis(1)
    }
    .width('100%')
    .height('100%')
  }
}

针对HarmonyOS（鸿蒙）系统中Next list超出屏幕长度且无法拉到尽头的问题，可以尝试以下解决方案：

  1. 检查布局设置：首先确认你的列表布局是否正确设置，特别是列表项的宽度和高度，以及列表的滚动容器是否设置了正确的滚动方向（通常为垂直滚动）。确保没有元素或样式导致列表容器被意外截断或遮挡。

  2. 更新鸿蒙系统：检查你的鸿蒙系统是否为最新版本。鸿蒙系统不断更新，新版本可能修复了旧版本中的bug，包括列表滚动问题。

  3. 重启设备：有时简单的重启设备可以解决一些临时的软件问题，包括列表滚动异常。

  4. 检查应用权限：确保你的应用具有足够的权限来访问和操作列表。权限不足可能导致列表无法正确渲染或滚动。

  5. 代码审查：如果以上方法均无效，建议仔细检查与列表滚动相关的代码逻辑。可能是某个事件处理器或动画效果干扰了列表的正常滚动。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html 。

回到顶部