【鸿蒙】Grid网格展示

import router from ‘@ohos.router’
import { NavData } from ‘…/…/model/HomeModels’

@Component
export default struct NavExample {
navData: Array = [
new NavData(1, “我的最爱”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(3, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’)),
new NavData(2, “购物车”, $r(‘app.media.ic_shelf’))
]

build() {
Column() {
Grid(){
ForEach(this.navData,(item:NavData,index:number)=>{
GridItem(){
Column(){
Image(item.titleIcon)
.width(25)
.height(25)
Text(item.title)
.fontSize(14)
}
}
})
}
.columnsTemplate(‘1fr 1fr 1fr 1fr’)//4行
.rowsTemplate(‘1fr 1fr’)//2列
.height(120)//设置固定高度
.rowsGap(12)//设置行与行的间距
.columnsGap(8)//设置列与列的间距
.backgroundColor(Color.White)
.borderRadius(18)
.margin({top:10,bottom:10})
.width(‘95%’)

}
.height('100%')

}
}