HarmonyOS鸿蒙Next中Scroll是否可以嵌套固定大小的Grid滚动

HarmonyOS鸿蒙Next中Scroll是否可以嵌套固定大小的Grid滚动

Grid固定大小，超过父视图的scroll，但grid无法跟随scroll滚动。可以看到Scroll组件的滚动条已经滚动了，但grid没有跟随滚动。我记得Api12之前还是可以的，这个代码有什么问题吗

```javascript
struct Index {
  [@State](/user/State) data: LazyDataSource<number> = new LazyDataSource()

  aboutToAppear(): void {
    this.data.initData([0,1,2,3,4,5,6,7,8,9,10,11,12,13])
  }

  build() {
    RelativeContainer() {
      Scroll() {
        Grid() {
          LazyForEach(this.data, (item: number)=>{
            GridItem() {
              Text(`${item}`)
                .fontColor(Color.White).textAlign(TextAlign.Center).width('100%').height('100%')
            }
            .backgroundColor(Color.Blue)
            .borderRadius('4vp')
            .size({width:'50vp', height:'50vp'})
          }, (item: number) => item.toString())
        }
        .position({left:0, top:0})
        .columnsGap(4)
        .rowsGap(4)
        .maxCount(this.data.totalCount())
        .layoutDirection(GridDirection.Row)
        .cellLength(50)
        .size({width:'536vp', height:'100%'})
      }
      .padding(4)
      .scrollable(ScrollDirection.Horizontal)
      .backgroundColor(Color.Red)
      .size({width:'200vp', height:'60vp'})
    }
    .height('60vp')
    .width('200vp')
  }
}

更多关于HarmonyOS鸿蒙Next中Scroll是否可以嵌套固定大小的Grid滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

Scroll组件和Grid组件发生了滚动冲突。Grid组件本身是支持滚动的，可参考构建可滚动的网格布局：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-grid-V5# 构建可滚动的网格布局。

如果想要同时使用Scroll组件和Grid组件，可以将Grid组件嵌套在Column组件内并确保Column组件撑满外部组件

可参考代码：

@Entry
@Component
struct Index {
  @State data: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]

  build() {
    RelativeContainer() {
      Scroll() {
        Column() {
          Grid() {
            ForEach(this.data, (item: number) => {
              GridItem() {
                Text(`${item}`)
                  .fontColor(Color.White).textAlign(TextAlign.Center).width('100%').height('100%')
              }
              .backgroundColor(Color.Blue)
              .borderRadius('4vp')
              .size({ width: '50vp', height: '50vp' })
            }, (item: number) => item.toString())
          }
          .position({ left: 0, top: 0 })
          .columnsGap(4)
          .rowsGap(4)
          .maxCount(this.data.length)
          .layoutDirection(GridDirection.Row)
          .cellLength(50)
          .size({ width: '536vp', height: '100%' })
        }
        .width(500) //确保能够触发滚动，当前值只是为了演示效果
      }
      .padding(4)
      .scrollable(ScrollDirection.Horizontal)
      .backgroundColor(Color.Red)
      .size({ width: '200vp', height: '60vp' })
    }
    .height('60vp')
    .width('200vp')
  }
}

更多关于HarmonyOS鸿蒙Next中Scroll是否可以嵌套固定大小的Grid滚动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Scroll组件可以嵌套固定大小的Grid组件并进行滚动。Scroll组件用于处理内容的滚动，而Grid组件用于实现网格布局。通过将Grid组件放置在Scroll组件内部，可以实现网格布局的滚动效果。Grid组件的大小可以通过设置其宽度和高度来固定，确保其在滚动区域内保持固定尺寸。Scroll组件会根据其内部内容的大小自动启用滚动功能，当Grid组件的内容超出其固定大小时，Scroll组件将允许用户通过滚动来查看超出部分的内容。这种嵌套方式适用于需要在固定区域内展示大量网格数据的场景。

在HarmonyOS鸿蒙Next中，Scroll组件可以嵌套固定大小的Grid组件实现滚动效果。Scroll作为容器，Grid作为内容，当Grid内容超出Scroll可视区域时，用户可以通过滚动查看全部内容。确保为Grid设置固定大小或高度，以避免布局问题。

回到顶部