【鸿蒙实战开发】手写鸿蒙应用-键盘音乐

最新推荐文章于 2025-10-10 09:20:19 发布

原创

最新推荐文章于 2025-10-10 09:20:19 发布 · 1.1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#android #harmonyos #华为 #鸿蒙 #安卓 #前端

先看结果

关键技术

基本布局技巧
AVPlayer
面向对象
全部采用 V2版本状态管理技术

新建一个项目

创建项目

新建项目

设置全局沉浸式

设置和不设置全局沉浸式的区别是这样的

在 src/main/ets/entryability/EntryAbility.ets 文件内进行编辑
loadContent 中进行设置

 `//   1 设置应用全屏
 let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口

 // 2   设置沉浸式
 windowClass.setWindowLayoutFullScreen(true)` </pre>

此时效果是这样的，文字也会直接在状态栏上显示

此时，考虑到不同设备的状态栏高度可能不同，所以我们需要

动态获取状态栏高度，存到全局状态中 AppStorageV2
页面读取全局状态中的状态栏高度，单独给页面进行设置


  `//   1 获取应用窗口对象
  const windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
  //  2  设置全屏
  windowClass.setWindowLayoutFullScreen(true)
  // 3 获取布局避让遮挡的区域
  const type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR;

  const avoidArea = windowClass.getWindowAvoidArea(type);
  const bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度
  const vpHeight = px2vp(bottomRectHeight) //  转换成 vp单位的数值
  //   4 把导航栏高度数据 存在全局
  const appStatu = AppStorageV2.connect(AppStatu, "AppStatu", () => new AppStatu())
  appStatu!.vpHeight = vpHeight` </pre>

AppStatu 是自定义类，用来存储数据状态栏高度数据的

src/main/ets/types/index.ets


       `@ObservedV2
       export class AppStatu {
        @Trace vpHeight: number =0
       }` </pre>

搭建背景

 `build() {

 Column({ space: 30 }) {

 }
 .width("100%")
 .height("100%")
 .backgroundImage($r("app.media.startIcon"))
 .backgroundImageSize(ImageSize.FILL)
 .backdropBlur(1000) // 对背景进行模糊

 }` </pre>

搭建琴谱

琴谱背景区域

使用背景图片+模糊搭建琴谱区域，高度由内容撑开


 `@Builder
 MusicScore() {
 // 琴谱
 Column({ space: 3 }) {
 Text("琴谱")
 }
 .width("100%")
 .backgroundImage($r("app.media.startIcon"))
 .backgroundImageSize(ImageSize.FILL)
 .backdropBlur(500) // 对背景进行模糊
 .padding({
 top: this.appStatu!.vpHeight + 20
 })
 }

 build() {

 Column({ space: 30 }) {
 //   1 琴谱
 this.MusicScore()
 }
 .wid

最低0.47元/天解锁文章