鸿蒙Next GridView 水平滚动

136 阅读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)
          }
          .width('25%')
          .backgroundColor(Color.Red)
        }, (service:string):string => service)
      }
      .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性,当内容超出Grid区域时,可水平滚动。
      .rowsGap(15)
      .columnsGap(15)
      .height("50%")
    }
  }
}

只需要给GridView 设置 rowsTemplate,超出界面的部分就可以滑动了。

image.png