在HarmonyOS NEXT开发中列表拼接滑动问题: 例如Column的子组件是3个Grid, 如何滑动, 使用Scroll嵌套没有成功？

Question

在HarmonyOS NEXT开发中列表拼接滑动问题: 例如Column的子组件是3个Grid, 如何滑动, 使用Scroll嵌套没有成功？

Answer 1

不要给外层组件设置高度，这样子组件内容超出高度范围即可滑动，可参考如下简单demo：

@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State list:number[] = [1,2,3,4,5] 
 
  build() { 
    Scroll(){ 
      Column() { 
        Grid(){ 
          ForEach(this.list,(item:number,index:number) =>{ 
            GridItem(){ 
              Text(`组件一数据项${item}`) 
            }.height(300) 
          }) 
        }.columnsTemplate('1fr 1fr').backgroundColor(Color.Red) 
        Grid(){ 
          ForEach(this.list,(item:number,index:number) =>{ 
            GridItem(){ 
              Text(`组件二数据项${item}`) 
            }.height(300) 
          }) 
        }.columnsTemplate('1fr 1fr').backgroundColor(Color.Green) 
        Grid(){ 
          ForEach(this.list,(item:number,index:number) =>{ 
            GridItem(){ 
              Text(`组件三数据项${item}`) 
            }.height(300) 
          }) 
        }.columnsTemplate('1fr 1fr').backgroundColor(Color.Blue) 
      } 
      .width('100%') 
      // .height('100%') 
      .justifyContent(FlexAlign.Center) 
    } 
  } 
}