当前位置：首页 > news >正文

鸿蒙音乐播放器实战02｜主页Tab栏开发：原生Tabs导航+分层目录+多页面无缝切换

news 2026/6/18 21:34:16

承接上一篇项目基础，本篇实现APP核心主页架构：底部Tab导航栏 + 多页面滑动切换。采用鸿蒙官方原生 Tabs 组件开发，简化项目结构，无需额外冗余数据文件，所有代码就近编写、逻辑清晰，适合新手学习。

本篇学习目标

规范项目目录，实现主页子页面统一分类管理
掌握鸿蒙原生 Tabs / TabContent 底部导航组件使用方法
掌握 interface 自定义类型，规范Tab数据格式
学会SVG单图标动态变色技巧，实现Tab选中/未选中状态切换
实现Tab点击、页面滑动双向联动高亮效果

一、最终项目目录结构

整理主页页面资源，将四个Tab子页面统一收纳，精简多余文件，目录清晰：

pages ├─ Index.ets // 项目全局入口、全局导航栈挂载 ├─ Start.ets // 广告启动过渡页 ├─ Layout.ets // 主页容器、底部Tab导航核心页面 └─ home // 主页子页面统一文件夹 ├─ Recommend.ets // 推荐页 ├─ Find.ets // 发现页 ├─ Dynamic.ets // 动态页 └─ Mine.ets // 我的页

二、创建四个主页子页面

在pages/home目录下新建4个空白ArkTS文件，均为纯展示组件，无需路由注册，仅由主页Tabs组件托管，必须添加export导出供外部导入使用。

1. Recommend.ets 推荐页

/** * 推荐页 * 主页Tab子页面，纯展示组件 * 后续扩展：首页轮播、歌单推荐、热门音乐列表 */ @Component export struct Recommend { build() { Column() { Text('音乐推荐页') .fontSize(24) .fontColor('#ffffff') .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .backgroundColor('#131215') .justifyContent(FlexAlign.Center) } }

2. Find.ets 发现页

/** * 发现页 * 主页Tab子页面，纯展示组件 * 后续扩展：音乐榜单、分类歌单、活动推荐 */ @Component export struct Find { build() { Column() { Text('音乐发现页') .fontSize(24) .fontColor('#ffffff') .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .backgroundColor('#131215') .justifyContent(FlexAlign.Center) } }

3. Dynamic.ets 动态页

/** * 动态页 * 主页Tab子页面，纯展示组件 * 后续扩展：用户音乐动态、好友分享、资讯推送 */ @Component export struct Dynamic { build() { Column() { Text('音乐动态页') .fontSize(24) .fontColor('#ffffff') .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .backgroundColor('#131215') .justifyContent(FlexAlign.Center) } }

4. Mine.ets 我的页

/** * 我的页 * 主页Tab子页面，纯展示组件 * 后续扩展：个人中心、收藏歌单、本地音乐、系统设置 */ @Component export struct Mine { build() { Column() { Text('个人中心-我的页') .fontSize(24) .fontColor('#ffffff') .fontWeight(FontWeight.Bold) } .width('100%') .height('100%') .backgroundColor('#131215') .justifyContent(FlexAlign.Center) } }

三、Layout主页核心代码（最终版）

所有Tab数据、类型定义就近写在当前页面，使用官方 Tabs 组件实现底部导航，自带滑动切换、状态联动，代码精简无冗余，可直接编译运行。

import { Recommend } from './home/Recommend' import { Find } from './home/Find' import { Dynamic } from './home/Dynamic' import { Mine } from './home/Mine' // 定义一个类 interface TabClass { text : string, icon : ResourceStr } @Builder export function LayoutBuilder() { Layout(); // 对应你的 struct 名字 } @Component export struct Layout { navPathStack: NavPathStack = new NavPathStack() @State textColorIndex : number = 0; tabData: TabClass[] =[ {text:'推荐', icon: $rawfile('ic_recommend.svg')}, {text:'发现',icon:$rawfile('ic_find.svg')}, {text:'动态',icon:$rawfile('ic_moment.svg')}, {text: '我的', icon: $rawfile('ic_mine.svg')}, ] @Builder tarBuilder(item: TabClass, index: number) { Column({ space: 5 }) { Image(item.icon).width(24).fillColor(this.textColorIndex===index?'#E85a88':'#63AAAA') Text(item.text).font({ size: 14 }).fontColor(this.textColorIndex===index?'#E85a88':'#63AAAA') } } build() { NavDestination() { // barPosition: BarPosition.End 菜单至于底部。 Tabs({ barPosition: BarPosition.End }) { ForEach(this.tabData, (item: TabClass, index) => { TabContent() { // 推荐页直接用你写好的 Recommend1 组件 if (index === 0) { Recommend() // 推荐 } else if (index === 1) { Find() // 发现 } else if (index === 2) { Dynamic() // 动态 } else if (index === 3) { Mine() // 我的 } else { // 其他页面先放个占位文本 Column() { Text(`${item.text}页面`).fontSize(20) }.width('100%').height('100%').justifyContent(FlexAlign.Center) } }.tabBar(this.tarBuilder(item, index)) .backgroundColor('#131215') }) }.backgroundColor('#3B3F42') .onChange((index) => { this.textColorIndex = index }) }.onReady((ctx: NavDestinationContext) => { // 获取共享的导航栈 this.navPathStack = ctx.pathStack; }) } }