2.饮食首页Tabs实现

2.1首页UI设计

采用纵向布局和横向布局BarPositon的含义是不一样的。

横向布局：Start：在上方，End：在下方

纵向布局：Start：在左侧，End：在右侧

2.2 定义Tabs组件

利用@Builder自定义组件，利用fillColor,主要是用来切换不同的颜色

注意：切换颜色的图片类型一定要是svg格式的。

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

2.3自定义切换的图标

利用index判断用户切换到哪一页，看是否于this.currentIndex相符合若符合则为绿色，否则为灰色。

 selectColor(index:number){
    return this.currentIndex==index?$r('app.color.primary_color'):$r('app.color.gray')

  }

2.4最终效果

从图片上可以看出Tabs切换时颜色等细节会改变。