HarmonyOS鸿蒙Next中Scroll组件嵌套多个Grid子组件，显示内容超出屏幕部分，无法滚动

HarmonyOS鸿蒙Next中Scroll组件嵌套多个Grid子组件，显示内容超出屏幕部分，无法滚动 Scroll组件嵌套了两个Grid子组件，根据文档设置相关属性后，无法滚动。

5 回复

是否是代码中设置了column的高度，可以把column高度去掉，让grid撑开column应该就可以了

更多关于HarmonyOS鸿蒙Next中Scroll组件嵌套多个Grid子组件，显示内容超出屏幕部分，无法滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry
@Component
struct scroll {
  scroller: Scroller = new Scroller()
  @State dataArr: string[] = []

  onPageShow(): void {
    for (let index = 0; index < 50; index++) {
      this.dataArr.push(index + '')
    }
  }

  build() {
    Scroll(this.scroller) {
      Column() {
        // 第一组 Grid
        Text('第一组 Grid')
          .fontColor(Color.Gray)
          .fontSize(13)
          .fontWeight(600)
          .width('100%')
          .margin({ top: 10, bottom: 10, left: 20 })

        Grid() {
          ForEach(this.dataArr, (text: string) => {
            GridItem() {
              Text(text)
                .fontSize(20)
                .fontColor(Color.Pink)
            }
            .width('25%')
          })
        }
        .margin({ top: 10 })
        .layoutDirection(GridDirection.Row)
        .width('100%')
        .rowsGap(10)

        // 第二组 Grid
        Text('第二组 Grid')
          .fontColor(Color.Gray)
          .fontSize(13)
          .fontWeight(600)
          .width('100%')
          .margin({ top: 10, bottom: 10, left: 20 })

        Grid() {
          ForEach(this.dataArr, (text: string) => {
            GridItem() {
              Text(text)
                .fontSize(20)
                .fontColor(Color.Pink)
            }
            .width('25%')
          })
        }
        .margin({ top: 10 })
        .layoutDirection(GridDirection.Row)
        .width('100%')
        .rowsGap(10)

        // 第三组 Grid
        Text('第三组 Grid')
          .fontColor(Color.Gray)
          .fontSize(13)
          .fontWeight(600)
          .width('100%')
          .margin({ top: 10, bottom: 10, left: 20 })

        Grid() {
          ForEach(this.dataArr, (text: string) => {
            GridItem() {
              Text(text)
                .fontSize(20)
                .fontColor(Color.Pink)
            }
            .width('25%')
          })
        }
        .margin({ top: 10 })
        .layoutDirection(GridDirection.Row)
        .width('100%')
        .rowsGap(10)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
  }
}

上个代码看下吧

在HarmonyOS鸿蒙Next中，Scroll组件嵌套多个Grid子组件时，如果显示内容超出屏幕部分无法滚动，可能是由于以下原因：

  1. Scroll组件未正确设置：确保Scroll组件的scrollable属性设置为true，并且flexGrow属性设置为1，以便Scroll组件能够占据剩余空间并启用滚动功能。

  2. Grid组件布局问题：Grid组件的layout属性可能未正确配置，导致内容无法正确计算和滚动。确保Grid组件的layout属性设置为adaptive或fixed，并且columnsTemplate和rowsTemplate属性正确设置。

  3. 高度或宽度限制：检查父组件和子组件的高度或宽度是否被固定或限制，导致Scroll组件无法正确计算内容大小。确保父组件和子组件的高度或宽度设置为auto或flexGrow，以便内容能够自适应。

  4. 布局嵌套问题：如果Scroll组件嵌套在多层布局中，确保每一层布局的高度或宽度都正确设置，避免布局嵌套导致滚动功能失效。

  5. Scroll组件的scrollBar属性：确保Scroll组件的scrollBar属性设置为true，以便在内容超出屏幕时显示滚动条。

通过以上检查和调整，可以解决Scroll组件嵌套多个Grid子组件时，显示内容超出屏幕部分无法滚动的问题。

在HarmonyOS鸿蒙Next中，如果Scroll组件嵌套了多个Grid子组件且内容超出屏幕部分无法滚动，可能是由于布局或样式设置不当导致的。请确保Scroll组件的height属性设置为固定值或flex:1，以使其能够占据可用空间并启用滚动功能。同时，检查Grid组件的布局是否合理，避免内容溢出。如果问题仍未解决，可以尝试使用List组件替代Grid，或调整布局结构。

回到顶部