【黑马健康APP--首页Tabs实现】

    本章实现项目《黑马健康APP》的首页Index的实现。

一.运行效果

二.知识储备

  （一）Tabs组件   

    目标：使用Tabs组件，实现页面内视角内容快速切换，完成UI界面。

  （二）TabBuilder组件

    目标：借助TabBuilder组件实现自定义tabBar，实现图标型的tabBar并且实现点击触发高亮。

三.实现步骤

 （一）实现首页Index界面布局：     TabContent

                                              （记录   发现  我的）

                                                       tabBar
  （二）编写内容区域Index的结构：

使用Tabs组件完成界面的TabContent部分和tabBar部分实现在不同的视图之间进行切换。由于tabBar只能接受字符串型，所以借助TabBuilder组件自定义为图片型并带有text符合界面要求；再由定义状态变量，根据当前角标点击状态的变化进行判断实现高亮。

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'))
      Text(title)
        .fontSize(14)
    }
  }

  build() {
    Tabs({barPosition: BarPosition.End}) {
     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)
  }
}

四.总结

      此次在APP应用中创建一个具有自定义标签栏的多页面组件，通过利用状态管理、动态样式和资源引用等技术，提供了一个响应式和可定制的用户界面。