实战案例-首页Tabs（源于黑马程序员）

Tabs组件可以实现页面内视图内容快速切换，包含TabBar（页面标题）和TabContent（页面内容）两个部分。

index页面：显示首页的标题，并通过标题切换页面内容

import { CommonConstants } from '../common/constants/CommonConstants'
@Entry
@Component
struct Index {
  @State currentIndex:number=0//状态变量：通过角标记录当前切换项

  //自定义样式（图标和标题），将标题，图标和角标定义为变量
  @Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
        //.fillColor(this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray'))
        .fillColor(this.selectColor(index))
      Text(title)
        .fontSize(14)
        .fontColor(this.selectColor(index))
    }
  }

  selectColor(index:number){//判断当前角标是否和标题角标一致，一致变为绿色，反之灰色
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  build() {
      Tabs({barPosition:BarPosition.End}){//barPosition:标题的位置（默认水平布局）
        TabContent(){
          Text('饮食记录首页')
        }
        .tabBar(this.TabBarBuilder($r('app.string.tab_record'),$r('app.media.ic_calendar'),0))

        TabContent(){
          Text('发现页面')
        }
        .tabBar(this.TabBarBuilder($r('app.string.tab_discover'),$r('app.media.discover'),1))

        TabContent(){
          Text('我的主页')
        }
        .tabBar(this.TabBarBuilder($r('app.string.tab_user'),$r('app.media.ic_user_portrait'),2))
      }
    .width('100%')
    .height('100%')
    .onChange(index => this.currentIndex = index)//记录当前切换角标
    //.vertical(false)标题为水平布局，true则标题为垂直布局
  }
}

运行结果：（当鼠标点击下标时，下标会变为绿色且跳转到其页面；反之则为灰色）