首页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: CommonConstant