HarmonyOS NEXT 应用开发实战(三、ArkUI页面底部导航TabBar的实现)

news2024/10/27 17:12:15

在开发HarmonyOS NEXT应用时，TabBar是用户界面设计中不可或缺的一部分。本文将通过代码示例，带领大家一同实现一个常用的TabBar，涵盖三个主要的内容页：首页、知乎日报和我的页面。以模仿知乎日报的项目为背景驱动，设定一个小目标，最终实现知乎日报app项目。

1. 项目结构

在我们的代码中，首先需要导入需要使用的页面组件：

import Home from "../pages/home/Home"
import ZhiHu from "../pages/zhihu/Zhihu"
import Mine from "../pages/mine/Mine"

这三条语句确保我们可以在TabBar中使用这些页面，分别是首页，知乎日报页和个人中心页。

关于Tabs组件的官方文档：文档中心-Tabs导航组件

2. 代码实现

接下来，我们将实现一个名为Index的组件，这是整个TabBar的核心。在此组件中，我们定义了三个主要功能：

页面显示的生命周期管理
TabBar的构建与展示
自定义Tab项样式

2.1 页面生命周期管理

我们定义了一些生命周期函数，帮助我们在页面显示和隐藏时输出相应的信息：

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  onPageShow() {
    console.info('Index onPageShow');
  }

  onPageHide() {
    console.info('Index onPageHide');
  }

  onBackPress() {
    console.info('Index onPageBackPress');
  }

currentIndex用于跟踪当前选中的Tab项，而controller则用于控制Tab的切换。

2.2 构建TabBar

在组件的build方法中，我们使用Tabs组件来创建TabBar，添加每个Tab项的内容和样式配置：

build() {
  Column() {
    Tabs({
      barPosition: BarPosition.End,
      controller: this.controller
    }) {
      TabContent() {
        Home()
      }.tabBar(this.TabBuilder('首页', 0, $r('app.media.icon_sort'), $r('app.media.icon_sort_default')))

      TabContent() {
        ZhiHu()
      }.tabBar(this.TabBuilder('日报', 1, $r('app.media.search_select'), $r('app.media.search_default')))

      TabContent() {
        Mine()
      }.tabBar(this.TabBuilder('我的', 2, $r('app.media.user_selected'), $r('app.media.user')))
    }.scrollable(false) // 禁止滑动切换
  }
  .width('100%')
  .height('100%')
}

这里使用了TabContent来表示每个页面的具体内容，并通过tabBar来定义每个Tab的样式和功能。

每一个TabContent对应的内容需要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar，可以设置其对应页签中的内容，tabBar作为内容的页签。

设置多个内容时，需在Tabs内按照顺序放置。

导航栏位置使用Tabs的参数barPosition进行设置，默认情况下，导航栏位于顶部，参数默认值为Start。设置为底部导航需要在Tabs传递参数，设置barPosition为End。

对应的图片资源，需放置在entry\src\main\resources\base\media目录中。这里发现个问题，图片只能放在这，好像里面不能再建子文件夹目录了，也就是说图片资源混在一起，这点儿有点儿不太好。

2.3 自定义Tab项样式

接下来，我们自定义了一个名为TabBuilder的方法，以便我们可以灵活地构建每个Tab的样式：

@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
  .onClick(() => {
    this.currentIndex = targetIndex
    this.controller.changeIndex(this.currentIndex)
  })
}

这个构建器根据当前选中的Tab来设置图标和文字颜色，并在点击时更新currentIndex和Tab的显示状态。

在page目录下新建文件夹home,mine和zhihu分别用来存放对应的tab页的内容。这样便于清晰的管理各个页面，且不至于把所有内容都放到一个Index.ets文件里。对应的主页Home组件，内容举例如下：


@Component
export default struct Home {
  build() {
    Column() {
      // 标题栏
      Text("首页")
        .size({ width: '100%', height: 50 })
        .backgroundColor("#28bff1")
        .fontColor("#ffffff")
        .textAlign(TextAlign.Center)
        .fontSize("18fp")
      // 内容项
      Text("首页").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
    }.size({ width: '100%', height: '100%' })
  }
}

3. 完整实现

import Home from "../pages/home/Home"
import ZhiHu from "../pages/zhihu/Zhihu"
import Mine from "../pages/mine/Mine"

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        TabContent() {
          Home()
        }.tabBar(this.TabBuilder('首页', 0, $r('app.media.icon_sort'), $r('app.media.icon_sort_default')))

        TabContent() {
          ZhiHu()
        }.tabBar(this.TabBuilder('日报', 1, $r('app.media.search_select'), $r('app.media.search_defaut')))

        TabContent() {
           Mine()
        }.tabBar(this.TabBuilder('我的', 2, $r('app.media.user_selected'), $r('app.media.user')))
      }.scrollable(false) // 禁止滑动切换
    }
    .width('100%')
    .height('100%')
  }

  // 自定义导航页签的样式
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }
}