鸿蒙项目实战（二）：实现动态栅格布局

需求：

动态设置栅格布局子元素

实现如下：

一、定义一个类，定义所有的子元素数据

// 首页业务按钮可选项集合
export class HomeBussinessConfig{// 供选择的所有tab集合// 只读 静态static readonly buttons = [{title:'功能一',icon:$r('app.media.icon_home_sale'),},{title:'功能二',icon:$r('app.media.icon_home_purchase'),},{title:'功能三',icon:$r('app.media.icon_home_product'),},{title:'功能四',icon:$r('app.media.icon_home_customer'),},{title:'功能五',icon:$r('app.media.icon_home_supplier'),},{title:'功能六',icon:$r('app.media.icon_home_allocation'),},{title:'功能七',icon:$r('app.media.icon_home_check'),},{title:'功能八',icon:$r('app.media.icon_home_flow'),}]
}

二、创建一个page

1、定义一个字段

@State gridItems:object[] = [] // gridItem数据源

 

2、定义自定义构建函数组件，实现栅格布局子元素的ui

// 自定义构建函数组件 gridCol内容
  @Builder btnItem(title:string,img:Resource){Column() {Image(img).width(40).height(40)Text(title).fontSize(12).margin({ top: 6 })}.justifyContent(FlexAlign.Center).width('100%').padding({ top: 6, bottom: 4 }).onClick(()=>this.clickBussinessBtn(title))}

 

3、在生命周期方法里动态设置需要显示的数据

aboutToAppear() {this.setButtons(['功能一','功能三','功能四','功能六','功能七'])}// 动态设置需要显示的tab
  setButtons(btn: string[]) {this.gridItems = []for (let i = 0; i < btn.length; i++) {let index = HomeBussinessConfig.buttons.findIndex((item) => {return item.title === btn[i]})if (index != -1) {this.gridItems.push(HomeBussinessConfig.buttons[index])}}}

 

 4、设置ui部分

build() {Column() {GridRow({columns:4,direction:GridRowDirection.Row,gutter: { x:4,y:12 }}) {ForEach(this.gridItems,(item,index)=>{GridCol(){this.btnItem(item.title,item.icon)}.width('100%')})}.padding(20).backgroundColor(Color.White)}.width('100%')}

 

相关文档：

栅格布局

完整代码：

// 首页
import { HomeBussinessConfig } from '../../common/config/HomeBussinessConfig'

@Entry
@Component
struct Home {
  @State gridItems:object[] = [] // gridItem数据源

  aboutToAppear() {
    this.setButtons(['功能一','功能三','功能四','功能六','功能七'])
  }
  // 动态设置需要显示的tab
  setButtons(btn: string[]) {
    this.gridItems = []
    for (let i = 0; i < btn.length; i++) {
      let index = HomeBussinessConfig.buttons.findIndex((item) => {
        return item.title === btn[i]
      })
      if (index != -1) {
        this.gridItems.push(HomeBussinessConfig.buttons[index])
      }
    }
  }

  // 按钮点击事件
  clickBussinessBtn(title:string){
    console.log('点击了'+title)
  }

  build() {
    Column() {
      GridRow({columns:4,direction:GridRowDirection.Row
      ,gutter: { x:4,y:12 }}) {
        ForEach(this.gridItems,(item,index)=>{
          GridCol(){
            this.btnItem(item.title,item.icon)
          }
          .width('100%')
        })
      }
      .padding(20)
      .backgroundColor(Color.White)
    }
    .width('100%')
  }

  // 自定义构建函数组件 gridCol内容
  @Builder btnItem(title:string,img:Resource){
    Column() {
      Image(img)
        .width(40)
        .height(40)
      Text(title)
        .fontSize(12)
        .margin({ top: 6 })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .padding({ top: 6, bottom: 4 })
    .onClick(()=>this.clickBussinessBtn(title))
  }

}