（3）首页tabs

1.构建页面布局：

 build() {
    Tabs(){
      TabContent(){
        Text('饮食记录页面')
      }
      .tabBar($r('app.string.tab_record'))//标题内容

      TabContent(){
        Text('发现页面')
      }
      .tabBar($r('app.string.tab_discover'))//标题内容

      TabContent(){
        Text('我的主页')
      }
      .tabBar($r('app.string.tab_user'))//标题内容
      }
      .width('100%')
    .height('100%')
}

变成图标加文字并置于底部

 Tabs({barPosition:BarPosition.End}){//设置在底部

@Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {//定义成变量，角标
    Column({ space: CommonConstants.SPACE_8 }) {//各个元素之间的间距
      Image(image)//图片样式
        .width(22)//宽度
        // .fillColor(this.selectColor(index))
      Text(title)//文字
        .fontSize(14)//默认是16
        // .fontColor(this.selectColor(index))
    }

并给导航栏设置样式

.tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))
 .tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))
.tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))

点击后变色

1.先设置初始的变量：
 @State currentIndex: number = 0//状态变量
2. .onChange(index => this.currentIndex = index)//角标记录下来
3.//定义一个函数颜色
  selectColor(index: number) {
    return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')
  }