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

前言

前面一篇文章中，已经说了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)