#鸿蒙通关秘籍#如何在HarmonyOS NEXT中使用Grid布局实现电影列表

在HarmonyOS NEXT开发中，可以使用Grid和GridItem组件来创建网格布局，适合用于展示类似电影列表的界面。下面的代码展示了如何使用Grid组件创建一个电影列表：

Grid() {
  ForEach(this.arr, (item: string) => {
    GridItem() {
      Column() {
        Image(item)
          .height(140)
          .width('100%')
          .objectFit(ImageFit.Cover)
        Text("电影《默杀》宁波福州")
          .fontSize(13)
          .margin({ top: 6 })
          .textOverflow({
            overflow:TextOverflow.Clip
          })
          .maxLines(1)
      }.width('100%')
    }
  })
}
.columnsTemplate('1fr 1fr 1fr')
.margin({ top: 20 })
.columnsGap(10)
.rowsGap(10)
.margin(10)

代码中使用了Grid()组件来定义网格布局，其中通过ForEach方法循环渲染多个GridItem。每个GridItem中使用了Column布局包含了一张图片和一个标题文本。columnsTemplate('1fr 1fr 1fr')用于定义每行显示三列，支持自适应宽度。通过columnsGap和rowsGap来定义列与列之间和行与行之间的间距。