鸿蒙期末-黑马健康2

首页Tabs

---

思维导图:

---

该页面整体为一个Tabs组件，在Tabs组件中包含了TabBar和TabContent

---

代码实现：

import BreakpointType from '../common/bean/BreanpointType'
import BreakpointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RIndex from '../view/record/RIndex'
@Entry
@Component
struct Index2{
  @State currentIndex :number= 0//下面的排列默认为序号0即记录列面
  private breakpointSystem:BreakpointSystem=new BreakpointSystem()
  @StorageProp('currentBreakpoint')currentBreakpoint:string = BreakpointConstants.BREAKPOINT_SM

  @State isPageShow:boolean =false

  onPageShow(){
    this.isPageShow=true
  }
  onPageHide(){
    this.isPageShow=false
  }

  @Builder TabBarBuilder(title:Resource,image:ResourceStr,index:number){
  Column({space:CommonConstants.SPACE_8}){
    Image(image)
      .width(22)
      .fillColor(this.selectColor(index))//fillColor图片要为svg格式才可
    Text(title)
      .fontSize(14)
      .fontColor(this.selectColor(index))
  }

 }
  aboutToAppear(){
    this.breakpointSystem.register()
  }
  aboutToDisappear(){
    this.breakpointSystem.unregister()
  }

  selectColor(index:number){//角标与当前角标做判断，颜色变化
      return this.currentIndex===index ? $r('app.color.primary_color') : $r('app.color.gray')
  }

  
  build(){
    Tabs({barPosition:BreakpointConstants.BAR_POSITION.getValue(this.currentBreakpoint)}){
      TabContent(){//没有这个子组件的话Tabs下只能用文字
        //RIndex({isPageShow:this.isPageShow})
        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($r('app.string.tab_user'))
      .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(new BreakpointType({//布局模式
      sm:false,
      md:true,
      lg:true
    }).getValue(this.currentBreakpoint))
  }

}

---

运行截图

 

---

总结

        上述代码主要存在index页面，用于显示首页面。在此页面中，通过Tabs组件下的TabContent与TabBar组件来布局，TabBarBuilder来定义TabBar中的图片文字和角标
定义一个selectColor组件来实现角标与当前角标做判断实现颜色变化