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

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

实现如下：

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

知识点：

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

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

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

// 主页Tabs可选项集合
export class TabConfig{
  title:string = ""
  icon:Resource = $r('app.media.app_icon')
  selectIcon:Resource = $r('app.media.app_icon')
  constructor(title:string,selectIcon:Resource,icon:Resource) {
    this.title = title
    this.icon = icon
    this.selectIcon = selectIcon
  }
  // 供选择的所有tab集合
  // 只读 静态
  static readonly tabList = [
    new TabConfig('首页',$r('app.media.icon_menu_home_press'),$r('app.media.icon_menu_home_unpress')),
    new TabConfig('供货商',$r('app.media.icon_menu_supplier_press'),$r('app.media.icon_menu_supplier_unpress')),
    new TabConfig('客户',$r('app.media.icon_menu_customer_press'),$r('app.media.icon_menu_customer_unpress')),
    new TabConfig('货品',$r('app.media.icon_menu_product_press'),$r('app.media.icon_menu_product_unpress')),
    new TabConfig('更多',$r('app.media.icon_menu_more_press'),$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:TabConfig, 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

完整代码：

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

@Entry
@Component
struct Main {
  @State currentTabIndex: number = 0 // 当前tab下标
  @State currentTabs: object[] = [] // 当前显示的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])
      }
    }
  }

  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
    })
    .barMode(BarMode.Fixed) // 不可滑动
  }
  // 自定义构建函数组件
  @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 })
  }
}