在鸿蒙应用开发中，Tabs 组件是用于实现多视图切换的核心控件，常用于构建底部导航栏、顶部导航栏或侧边栏菜单。封装组件‌可提升代码复用性与开发效率‌，增强可维护性与可读性‌

1.创建tabs菜单组件

import { TabsMenu } from "../constants/TabsArray"
import { TabsClass } from "../model/Tabs"

@Preview
@Component
export struct CompMenuBar {
  // 菜单列
  menuList: TabsClass[] = TabsMenu

  build() {
    Row() {
      ForEach(
        this.menuList,
        (item: TabsClass) => {
          Column() {
            Image(item.icon)
              .width(25)
              .height(25)
            Text(item.title)
              .fontSize(14)
              .fontColor($r('app.color.text_secondary'))
          }
        }
      )
    }
    .width('100%')
    .height(60)
    .backgroundColor($r('app.color.white'))
    .justifyContent(FlexAlign.SpaceAround)
  }
}

2.创建TabsArray.est

import { TabsClass } from "../model/Tabs";

// 底部导航栏标签组
export const TabsMenu: TabsClass[]=[
  {
    title:'工作台',
    name:'home',
    icon:$rawfile('bg/tabs/home.png'),
    iconActivate:$rawfile('bg/tabs/home-activate.png')
  },
  {
    title:'患者管理',
    name:'hz',
    icon:$rawfile('bg/tabs/hz.png'),
    iconActivate:$rawfile('bg/tabs/hz-activate.png')
  },
  {
    title:'笔记',
    name:'note',
    icon:$rawfile('bg/tabs/note.png'),
    iconActivate:$rawfile('bg/tabs/note-activate.png')
  },
  {
    title:'我的',
    name:'my',
    icon:$rawfile('bg/tabs/my.png'),
    iconActivate:$rawfile('bg/tabs/my-activate.png')
  }
]

3.创建Tabs.est

export class TabsClass{
  name:string=''
  title:string=''
  icon?:ResourceStr=''
  iconActivate?:ResourceStr=''
}

4.展示效果图