定义tab页面和布局

build() {
  Column() {
    Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) {

      // Tab 1
      TabContent() {
        Calculator()
      }.tabBar(this.TabBuilder(0, '文字'))

      // Tab 2
      TabContent() {
        this.RelationshipContent()
      }.tabBar(this.TabBuilder(1, '文字'))

      // Tab 3
      TabContent() {
        HealthCalculator()
      }.tabBar(this.TabBuilder(2, '文字'))

      // Tab 4
      TabContent() {
        ShelfLifeCalculator()
      }.tabBar(this.TabBuilder(3, '文字'))
    }
    .width('100%')
    .height('100%')
    .barMode(BarMode.Fixed)
    .onChange((index: number) => {
      this.currentIndex = index
    })
  }
  .width('100%')
  .height('100%')
}

自定义tabBar

// 自定义 TabBar - 无下划线
@Builder
TabBuilder(index: number, name: string) {
  Column() {
    Text(name)
      .fontColor(this.currentIndex === index ? '#007DFF' : '#666666')
      .fontSize(16)
      .fontWeight(this.currentIndex === index ? 500 : 400)
  }
  .width('100%')
  .height(30)
  .justifyContent(FlexAlign.Center)
}