鸿蒙【ArkUI】自定义菜单页组件

效果图：

请求接口数据示例：

{
  "msg": "操作成功",
  "code": 20000,
  "data": [
    {
      "title": "系统管理",
      "menuVOList": [
        {
          "menuName": "菜单管理",
          "orderNum": 3,
          "path": "MenuManager",
          "icon": "menu.png"
        },
        {
          "menuName": "用户管理",
          "orderNum": 1,
          "path": "UserManager",
          "icon": "user.png"
        },
        {
          "menuName": "角色管理",
          "orderNum": 2,
          "path": "RoleManager",
          "icon": "role.png"
        }
      ]
    },
    {
      "title": "系统监控",
      "menuVOList": [
        {
          "menuName": "定时任务",
          "orderNum": 2,
          "path": "job",
          "icon": "job.png"
        },
        {
          "menuName": "在线用户",
          "orderNum": 1,
          "path": "online",
          "icon": "online.png"
        }
      ]
    },
    {
      "title": "日志管理",
      "menuVOList": [
        {
          "menuName": "登录日志",
          "orderNum": 2,
          "path": "logininfor",
          "icon": "logininfor.png"
        },
        {
          "menuName": "操作日志",
          "orderNum": 1,
          "path": "operlog",
          "icon": "form.png"
        }
      ]
    }
  ]
}

代码：

数据模型（Model）：

//菜单卡片数据模型
export interface MenuCardModel{
  'title':string,
  'menuVOList':MenuModel[]
}

//菜单数据模型
export interface MenuModel{
  'icon' : string,
  'menuName':string,
  'orderNum':number,
  'path':string
}

组件代码：

import router from '@ohos.router';
import { MenuCardModel } from '../../models/MenuCardModel'
import { MenuModel } from '../../models/MenuModel'

@Component
export struct MenuView {
  @Link menuCardList: Array<MenuCardModel>
  // menuModel1: MenuModel = {
  //   icon: 'role.png',
  //   menuName: '角色管理',
  //   orderNum: 1,
  //   path: 'RoleManager'
  // };
  // menuModel2: MenuModel = {
  //   icon: 'permission.png',
  //   menuName: '权限管理',
  //   orderNum: 2,
  //   path: 'PermManager'
  // };
  // menuList: MenuModel[] = [this.menuModel1,this.menuModel2]
  //
  //
  // m : MenuCardModel = {
  //   title: '菜单卡片',
  //   menuVOList: this.menuList
  // };
  //http://127.0.0.1:9000/template/menu/role.png
  build() {
      Column() {
        ForEach(this.menuCardList, (m: MenuCardModel) => {
          Column(){
            Text(m.title)
              .fontSize('18')
              .fontWeight(FontWeight.Bold)
              .alignSelf(ItemAlign.Start)
              .padding({  top: '5' })
            Grid() {
              ForEach(m.menuVOList, (item: MenuModel) => {
                GridItem() {
                  Column() {
                    Image('http://127.0.0.1:9000/template/menu/' + item.icon)
                      .height('35')
                      .width('35')
                      .onClick(() => {
                        router.pushUrl({
                          url: "pages/view/" + item.path
                        }).then(() => {
                          console.log('router successful')
                        }).catch(err => {
                          console.log('router err')
                        })
                      })
                    Text(item.menuName)
                      .fontSize('15')
                      .padding({ top: '10' })
                  }
                  .margin({ top: '10', right: '10', left: '10', bottom: '10' })
                  .alignSelf(ItemAlign.Start)
                }
              })
            }

          }

        })
      }
      .width('350')
      .height('100%')
      .backgroundColor("#fffcfbfb")
      .margin({ right: 5, left: 5, top: 10, bottom: 5 })
      .borderRadius('10f')
  }

  aboutToAppear() {

  }
}

使用示例：

import { MenuCardModel } from '../../models/MenuCardModel'
import { menuApi } from '../../api/MenuApi';
import { MenuView } from '../Components/MenuView'
import TitleComponent from '../Components/TitleComponent'
import { MenuModel } from '../../models/MenuModel';

@Component
export struct Home {
  @State menuCardList: Array<MenuCardModel> = []
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      TitleComponent({ title: "首页", isBack: false })
      Scroll(this.scroller) {
        Column() {
          Image($r('app.media.homeBack'))
            .interpolation(ImageInterpolation.High)
            .autoResize(true)
            .fitOriginalSize(true)
            .height('120')
            .width('350')
            .padding({ top: 5 })
            .borderRadius('10f')
          MenuView({ menuCardList: $menuCardList });
        }
        .width('100%')
        .backgroundColor("#ffefefef")
      }.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
    }
    .height('100%')
  }
  //生命周期函数中加载菜单数据 在build前执行
  aboutToAppear() {
    menuApi.getMenuTree().then((apiResult) => {
      this.menuCardList = apiResult.data
      console.log(JSON.stringify(this.menuCardList))
    })
  }
}