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

需求：

动态设置栅格布局子元素

实现如下：

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

 

// 首页业务按钮可选项集合
export class HomeBussinessConfig{
  title:string = ""
  icon:Resource = $r('app.media.app_icon')

  constructor(title:string,icon:Resource) {
    this.title = title
    this.icon = icon
  }
  // 供选择的所有tab集合
  // 只读 静态
  static readonly buttons = [
    new HomeBussinessConfig('功能一',$r('app.media.icon_home_sale')),
    new HomeBussinessConfig('功能二',$r('app.media.icon_home_purchase')),
    new HomeBussinessConfig('功能三',$r('app.media.icon_home_product')),
    new HomeBussinessConfig('功能四',$r('app.media.icon_home_customer')),
    new HomeBussinessConfig('功能五',$r('app.media.icon_home_supplier')),
    new HomeBussinessConfig('功能六',$r('app.media.icon_home_allocation')),
    new HomeBussinessConfig('功能七',$r('app.media.icon_home_check')),
    new HomeBussinessConfig('功能八',$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:HomeBussinessConfig,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))
  }

}