首页Tabs

前两篇文章呢我们已经完成了欢迎页面的开发，包括页面布局以及业务逻辑等

那么接下来的几篇文章我将带领你完成首页部分的开发

本篇文章呢先为大家讲解首页UI的导航栏设计

一、分析布局

照片多少有点糊但是不影响使用啊，我们可以很容易的看出首页的整体布局：

底部固定导航栏，导航栏内部有三个导航项，每个导航项都分为上部分图片和下部分文本

二、关键技术

Tabs组件

在固定导航栏中我们需要点击不同的导航项时内容会随之发生变化，这时候我们就可以用ArkUI中为我们提供的Tabs组件来实现页面内容的快速切换。

TabBar就是固定导航栏的部分

TabContent是上面需要展示的内容

Builder函数

但是由于Tabs组件TabBar的样式过于单一，我们需要借助Builder的函数，通过Builder函数就可以实现自己定义TabBar的样式

三、正式开发

由于我们首页的开发就是在index中，所以我们就不需要新建直接找到index，将index内没有用的东西统统删掉

按照我们分析的布局来书写代码

@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.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)
  }
}

在TabBarBuilder中我们还添加了一个index的参数，由于我们通过Builder来自定义样式后，要想实现点击不同的导航选项使其变色，我们需要使用.onChange(index => this.currentIndex = index)点击事件通过不同的index来控制颜色的变化。

为了使样式控制更加方便，我们还将颜色及文本样式类的代码通过传参的方式进行样式的渲染

四、最终效果

经过我们的分析及开发最终我们获得了底部导航栏的样式

OK，我们下篇文章接着讲，我们这里附上黑马程序员首页Tabs的视频链接，文章配合视频更好理解哦。