记录：鸿蒙实战案例(源于黑马程序员视频)

学习内容：

观看黑马程序员视频并完成首页Tabs

---

学习时间：

2024年6月17日

---

学习产出：

1.Tabs组件的学习

Tabs组件可以实现页面内试图内容快速切换，包括TabContent和tabBar两部分

注：tabBar默认为纯文本的样式，想要加入图标只能自定义

Tabs({barPosition:BarPosition.End}){

      TabContent(){
        Text('内容1')
      }
      .tabBar('标题1')

2.自定义tabBar实现该布局

@Builder TabBarBuilder(title:ResourceStr,image:ResourceStr,index:number){
    Column({space:CommonConstants.SPACE_8}){
      Image(image)
        .width(22)
      Text(title)
        .fontSize(14)
    }
  }

3.问题：

发现状态不会改变，通过记录当前切换的下标

（1）给TabBarBuilder内部加点击事件

（2）给Tabs加onchange事件

（2）

.onChange(index=>this.currentIndex=index)

改变颜色的函数：

判断当前下标和自己的下标是否为同一个，是变为绿色否则为灰色

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

 完整代码：

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)//图片必须为svg格式
        .width(22)
        .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}){

      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)

  }
}

运行结果：