当前位置：首页 > article >正文

鸿蒙(HarmonyOS)应用开发——容器组件（Grid组件）

article 2025/2/23 21:10:05

前言

前面一篇文章中，已经说了List组件。那么接下来就是容器组件中的Grid组件

使用Grid组件构建网络布局

Grid组件时网格容器，它是由“行”和“列”构成，通过指定不同的项目所在的单元格作出各种各样的布局，包括子组件 GridItem

在这里插入图片描述

语法

Grid(scroller?:Scroller)

参数：scroller控制Grid的滚动

属性

columnsTemplate
columnsTemplate表示设置当前网络布局列的数量，默认是1列，使用的单位是fr

fr是指划分网格时的比例值
columnsTemplate（1fr,2fr,1fr）表示将Grid分为3列，并将Grid组件的宽4等分

Grid() {

}
.columnsTemplate('1fr 1fr 1fr 1fr')

rowTemplate
用于设置网格布局行的数量，默认是1列，使用的单位是fr

Grid() {

}
.rowTemplate('1fr 1fr 1fr 1fr')

columnsGap
设置列与列的间距，单位默认时vp

      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, item => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
    }

rowGap
设置行与行之间的间距

      Grid() {
        ForEach(this.arr, (item: string) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .fontColor(Color.White)
              .backgroundColor(0x007DFF)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }
        }, item => item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)