《鸿蒙HarmonyOS应用开发基础》课件 第9章 项目实战——黑马云音乐.pptx

第9章项目实战——黑马云音乐《鸿蒙HarmonyOS应用开发基础》

学习目标/Target熟悉项目介绍，能够说出“黑马云音乐”包含的主要页面掌握“黑马云音乐”的页面制作方法，能够独立完成代码编写掌握“黑马云音乐”播放功能的开发方法，能够独立完成代码编写掌握“黑马云音乐”接入音视频播控服务的开发方法，能够独立完成代码编写

章节概述/Summary通过对前面章节的学习，相信大家已经掌握了鸿蒙开发的基础知识。为了更好地将理论知识转化为实践能力，并积累鸿蒙项目的开发经验，本章将以项目实战的方式引领大家进一步应用所学内容，完成一个综合项目“黑马云音乐”的开发。

目录/Contents9.19.2项目介绍页面制作9.39.4播放功能开发接入音视频播控服务

项目介绍9.1

9.1项目介绍先定一个小目标！熟悉项目介绍，能够说出“黑马云音乐”包含的主要页面

9.1项目介绍在当今这个数字化、快节奏的时代，音乐已成为人们日常生活中不可或缺的一部分，它不仅能够调节情绪、激发灵感，还是许多人放松身心、享受独处时光或与朋友共享欢乐的重要方式。目前市场上有很多音乐App，如QQ音乐、酷狗音乐、网易云音乐等。本章讲解的“黑马云音乐”名称取自黑马程序员中的“黑马”和“云音乐”的组合，它是一个专为鸿蒙平台开发的音乐App，它可以在线播放音乐。

9.1项目介绍“黑马云音乐”的页面主要包括启动页、首页、播放页，其中首页是由4个子页面组成的，分别是推荐页、发现页、动态页、我的页，在默认情况下，首页显示的子页面为推荐页，用户可通过Tab栏切换到其他子页面。

9.1项目介绍

页面制作9.2

9.2.1启动页先定一个小目标！掌握启动页的制作方法，能够独立完成代码编写

9.2.1启动页启动页是“黑马云音乐”启动后显示的第一个页面，用于向用户展示一些宣传信息，它会在5s后自动跳转到首页，用户也可以通过点击“跳过”按钮手动跳转到首页。

9.2.1启动页下面演示启动页的具体实现。

9.2.2首页-Tab栏先定一个小目标！掌握首页-Tab栏的制作方法，能够独立完成代码编写

9.2.2首页-Tab栏“黑马云音乐”的首页具有Tab栏切换的效果，其页面结构由内容视图和页签两部分组成，如下图所示。

9.2.2首页-Tab栏1.Tabs组件的基本使用方法为了方便开发Tab栏切换效果，鸿蒙提供了Tabs组件。该组件是一个通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。Tabs({barPosition:BarPosition.End}){TabContent(){Text(内容视图1)}.tabBar(页签1)TabContent(){Text(内容视图2)}.tabBar(页签2)}

9.2.2首页-Tab栏2.实现带有图标的页签效果“黑马云音乐”中的页签既有图标又有文字。为了实现带有图标的页签效果，需要以对象的形式保存页签的数据，并通过自定义构建函数实现页签的定制。

9.2.2首页-Tab栏3.为页签添加高亮状态在“黑马云音乐”首页中，当前显示的内容视图对应的页签应呈现高亮效果，从而让用户知道当前所处的子页面。

9.2.2首页-Tab栏4.创建内容视图完成了页签的制作后，接下来开始制作内容视图。由于完整的内容视图的代码比较复杂，此时先不进行完整的内容视图的代码编写，而是先将内容视图创建出来，只编写少量的代码以区分每个内容视图，并在页面中完成内容视图的导入。

9.2.2首页-Tab栏5.实现沉浸式效果在页面上方有一块白色区域，这块区域是系统的状态栏区域；在页面底部，页签下方也保留了一些空间，这个空间是系统的导航栏区域。在鸿蒙中，页面的显示区域（不包括状态栏区域和导航栏区域）属于安全区域，状态栏区域和导航栏区域则属于非安全区域。在默认情况下，开发者开发的界面都被布局在安全区域内。由于状态栏区域的样式风格与页面风格不搭配，影响用户体验，因此，为页面应用沉浸式效果来解决这个问题。

9.2.2首页-Tab栏在EntryAbility的onWindowStageCreate()方法中调用setWindowLayoutFullScreen()方法可以设置沉浸式效果。由于设置沉浸式效果后，页面会与非安全区域发生重叠，为了解决这个问题，需要在onWindowStageCreate()方法中获取顶部避让区和底部避让区（分别对应状态栏区域和导航栏区域）的高度，从而使页面内容避开非安全区域。另外，状态栏区域中内容默认的颜色与页面背景颜色接近，导致难以辨认，还需要修改状态栏区域中内容的颜色为白色，从而在深色背景下更容易突显内容。

9.