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

在开发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 = 0private 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 = targetIndexthis.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 = 0private 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 = targetIndexthis.controller.changeIndex(this.currentIndex)})}
}