HarmonyOS Next应用开发实战——多页面切换的Tab页实现（part1）

HarmonyOS Next应用开发实战——多页面切换的Tab页实现

文章概要

本文聚焦于HarmonyOS Next应用开发中多页面切换的Tab页实现。详细介绍了如何搭建一个具备多页面导航功能的Tab页，包括权限检查、Tab栏构建、页面内容展示以及响应式布局等核心功能。

核心功能介绍

1. 权限检查

在页面即将显示时，进行权限检查，确保应用具备所需的权限。

private permissions: Array<Permissions> = ['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION'];

aboutToAppear(): void {
  PermissionsUtil.checkPermissions(this.permissions)
}

2. Tab栏构建

使用@Builder装饰器构建Tab栏，根据当前选中的Tab索引，动态调整图标和文本的样式。

@Builder
BuildTabs(icon: ResourceStr, title: ResourceStr, index: number) {
  Column({ space: CommonConstants.PUBLIC_SPACE / 2 }) {
    Image(this.currentTabIndex === 0 && this.currentTabIndex === index ? $r('app.media.bottomtab_item_special') :
      icon)
      .width(this.currentTabIndex === 0 && this.currentTabIndex === index ? TabConstants.TAB_ICON_WIDTH * 3 / 2 :
      TabConstants.TAB_ICON_WIDTH)
      .height(this.currentTabIndex === 0 && this.currentTabIndex === index ? TabConstants.TAB_ICON_WIDTH * 3 / 2 :
      TabConstants.TAB_ICON_HEIGHT)
      .fillColor(this.currentTabIndex === index ? TabConstants.SELE_COLOR : TabConstants.DEF_COLOR)
    Text(this.currentTabIndex === 0 && this.currentTabIndex === index ? '' : title)
      .fontSize(CommonConstants.S_FONT_SIZE)
      .fontWeight(FontWeight.Regular)
      .fontColor(this.currentTabIndex !== index ? TabConstants.DEF_COLOR : TabConstants.SELE_COLOR)
  }
}