前一章节，我们完成了欢迎页的逻辑和UI，沉浸式效果也做了讲解和实现，本文简单介绍一下主页面Tabs组件的应用。

Tabs组件介绍

Tabs组件是当前所有应用中最常用的容器组件之一，用户可以在一个页面内快速实现视图内容的切换，极大地提高效率。

Tabs组件主要包含两个部分：TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

image.png

Tabs组件的写法通常如下所示：

Tabs() {
  TabContent() {
    Text('首页的内容').fontSize(30)
  }
  .tabBar('首页')

  TabContent() {
    Text('推荐的内容').fontSize(30)
  }
  .tabBar('推荐')
  
  TabContent() {
    Text('我的内容').fontSize(30)
  }
  .tabBar("我的")
}

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，需要将barPosition设置为BarPosition.End。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容：首页、发现、推荐、我的
  ...
}

关于Tabs组件的更多用法，请见官方文档Tabs组件。

Tabs组件实现

关于我的tabs实现，直接上代码吧。

定义一个tabs数组（此处第三项是icon资源）

export class AppConstants {
    ......
  /**
   * Tab array.
   */
  static readonly TAB_ARRAY: string[] = [
    'app.string.tab_homepage',
    'app.string.tab_friend',
    'app.media.icon_add',
    'app.string.tab_msg',
    'app.string.tab_mine'
  ];
}

在build绘制

  build() {
    NavDestination() {
      Column() {
        Tabs({ index: this.curTabIndex, controller: this.tabsController }) {
          TabContent() {
            HomePage()
          }
          .width(AppConstants.FULL_PERCENT)
          .height($r('app.string.content_height'))

          TabContent() {
            Text($r(this.tabArray[1]))
              .fontSize($r('app.integer.text_size_20'))
          }
          .width(AppConstants.FULL_PERCENT)
          .height($r('app.string.content_height'))

          TabContent() {
            Text('发布')
              .fontSize($r('app.integer.text_size_20'))
          }
          .width(AppConstants.FULL_PERCENT)
          .height($r('app.string.content_height'))

          TabContent() {
            Text($r(this.tabArray[3]))
              .fontSize($r('app.integer.text_size_20'))
          }
          .width(AppConstants.FULL_PERCENT)
          .height($r('app.string.content_height'))

          TabContent() {
            Text($r(this.tabArray[4]))
              .fontSize($r('app.integer.text_size_20'))
          }
          .width(AppConstants.FULL_PERCENT)
          .height($r('app.string.content_height'))
        }
        .scrollable(false)
        // .barHeight($r('app.integer.tabs_bar_height'))
        // .animationDuration(TabContentConstants.TAB_TABS_DURATION)
        .onChange((index: number) => {
          this.curTabIndex = index;
        })

        Row() {
          ForEach(this.tabArray, (item: string, index: number) => {
            Column() {
              if (index == 2) {
                if (this.curTabIndex == index) {
                  Image($r(item)).width(28).height(24).objectFit(ImageFit.Fill).borderRadius(2)
                } else {
                  Image($r(item)).width(24).height(21).objectFit(ImageFit.Fill).borderRadius(2)
                }
              } else {
                Text($r(item))
                  .fontColor(this.curTabIndex === index ? '#ffffff' : '#66ffffff')
                  .margin({ top: 4 })
              }
            }
            .width(50)
            .margin(10)
            .height(60)
            .onClick(() => {
              this.curTabIndex = index;
              this.tabsController.changeIndex(this.curTabIndex);
            })
          }, (item: string, index: number) => JSON.stringify(item) + index)
        }
        .offset({
          y: $r('app.integer.tab_row_offset')
        })
        .width(AppConstants.FULL_PERCENT)
        // Extend to all non-secure areas.
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
        .backgroundColor($r('app.color.tab_black'))
        .justifyContent(FlexAlign.SpaceAround)
      }
    }
    .hideTitleBar(true)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack
      LogUtils.info("current page config info is ：" , JSON.stringify(context.getConfigInRouteMap()));
    })
  }

NavDestination组件从API Version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API Version 11之前的版本需配合expandSafeArea属性实现安全区避让。

以上代码中把tabs标签和tabcontent的绘制实现了抽离，其中tabs角标为0的页面content引用的是home模块的自定义view，大家可以自定义view名称和UI，前文已讲过导出UI或接口的方法，此处不再赘述。

此外，本文在build内部包含了一层NavDestination组件，这是因为前面几篇文章中关于页面跳转，我用的是router跳转，由于官方不再推荐使用router，我这边已改用Navigation组件，大家如果还使用的router，把外面包的这层NavDestination去掉即可。

Navigation作为当前HarmonyOS NEXT开发中主推的路由组件，后续将会频繁被使用到。关于Navigation组件的特性和使用，下一篇文章再做具体讲解。