鸿蒙Next GridView 垂直滚动

84 阅读1分钟
@Component
struct Shopping {
  @State services: Array<string> = ['直播', '进口','直播1',
    '进口2','直播3', '进口4','直播5', '进口5','直播6', '进口6',
    '直播7', '进口7',
    '直播8', '进口8',
  ]

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.services, (service: string, index) => {
          GridItem() {
            Text(service)
          }
          .height('50%')
          .backgroundColor(Color.Red)
        }, (service:string):string => service)
      }
      // .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性,当内容超出Grid区域时,可水平滚动。
      .columnsTemplate("1fr 1fr 1fr")
      .rowsGap(15)
      .columnsGap(15)
      .height("50%")
    }
  }
}

只需要设置columnsTemplate 不设置 rowsTemplate,超出GridView 高度的内容就可以滑动了。

image.png