鸿蒙项目实战（一）：实现首页动态Tab

需求：存在n个tab页，支持动态设置显示指定某几个tab

实现如下：

一、定义一个类，定义所有的tab页数据

知识点：

1、类使用export修饰，可以让其他模块引入

2、类内字段 设置 static readonly ，只读静态字段

3、图标文件存于src->main->resources->base->media目录下

// 首页菜单配置
export class TabConfig{
  // 供选择的所有tab集合
  // 只读 静态
  static readonly tabList = [
    {
      title:'首页',
      selectIcon:$r('app.media.icon_menu_home_press'),
      icon:$r('app.media.icon_menu_home_default'),
    },
    {
      title:'销售',
      selectIcon:$r('app.media.icon_menu_sale_press'),
      icon:$r('app.media.icon_menu_sale_unpress'),
    },
    {
      title:'客户',
      selectIcon:$r('app.media.icon_menu_customer_press'),
      icon:$r('app.media.icon_menu_customer_unpress'),
    },
    {
      title:'更多',
      selectIcon:$r('app.media.icon_menu_more_press'),
      icon:$r('app.media.icon_menu_more_unpress'),
    },
  ]
}

二、创建一个page

1、定义两个字段：

 @State currentTabIndex: number = 0 // 当前tab下标
 @State currentTabs: object[] = [] // 当前显示的tab集合

2、定义自定义构建函数组件，实现自定义tab

// 自定义构建函数组件
@Builder mTabs(index: number, title: string, selectIcon: Resource, icon: Resource) {
    Column() {
      Image(this.currentTabIndex == index ? selectIcon : icon)
        .width(28)
        .height(28)
      Text(title)
        .fontSize(14)
        .margin({ top: 6 })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .padding({ top: 6, bottom: 4 })
  }

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

 aboutToAppear() {
    this.setTabs(['首页', '客户', '更多'])
  }
 // 动态设置需要显示的tab
 setTabs(tab: string[]) {
    this.currentTabs = []
    for (let i = 0; i < tab.length; i++) {
      let index = TabConfig.tabList.findIndex((item) => {
        return item.title === tab[i]
      }
      )
      if (index != -1) {
        this.currentTabs.push(TabConfig.tabList[index])
      }
    }
  }

4、设置ui部分

build() {
    Tabs() {
      ForEach(this.currentTabs, (item, index) => {
        TabContent() {
          Text('这是' + item.title + '页面')
        }
        .tabBar(this.mTabs(index, item.title, item.selectIcon, item.icon))
      })
    }
    .barPosition(BarPosition.End)
    .width('100%')
    .height('100%')
    .barHeight(60)
    .onChange((index:number)=>{
      this.currentTabIndex = index //改变当前选中的tab下标
    })
    .barMode(BarMode.Fixed) // 不可滑动
  }

相关文档：

自定义构建函数@Builder

选项卡Tabs

完整代码：

 1 // 首页
 2 import { TabConfig } from '../common/config/TabConfig'
 3 
 4 @Entry
 5 @Component
 6 struct Main {
 7   @State currentTabIndex: number = 0 // 当前tab下标
 8   @State currentTabs: object[] = [] // 当前显示的tab集合
 9   //
10   aboutToAppear() {
11     this.setTabs(['首页', '客户', '更多'])
12   }
13   // 动态设置需要显示的tab
14   setTabs(tab: string[]) {
15     this.currentTabs = []
16     for (let i = 0; i < tab.length; i++) {
17       let index = TabConfig.tabList.findIndex((item) => {
18         return item.title === tab[i]
19       }
20       )
21       if (index != -1) {
22         this.currentTabs.push(TabConfig.tabList[index])
23       }
24     }
25   }
26 
27   build() {
28     Tabs() {
29       ForEach(this.currentTabs, (item, index) => {
30         TabContent() {
31           Text('这是' + item.title + '页面')
32         }
33         .tabBar(this.mTabs(index, item.title, item.selectIcon, item.icon))
34       })
35     }
36     .barPosition(BarPosition.End)
37     .width('100%')
38     .height('100%')
39     .barHeight(60)
40     .onChange((index:number)=>{
41       this.currentTabIndex = index
42     })
43     .barMode(BarMode.Fixed) // 不可滑动
44   }
45   // 自定义构建函数组件
46   @Builder mTabs(index: number, title: string, selectIcon: Resource, icon: Resource) {
47     Column() {
48       Image(this.currentTabIndex == index ? selectIcon : icon)
49         .width(28)
50         .height(28)
51       Text(title)
52         .fontSize(14)
53         .margin({ top: 6 })
54     }
55     .justifyContent(FlexAlign.Center)
56     .width('100%')
57     .height('100%')
58     .padding({ top: 6, bottom: 4 })
59   }
60 }