HarmonyOS 鸿蒙Next 应用开发-ArkUI 鸿蒙沉浸式标题栏实践

HarmonyOS 鸿蒙Next 应用开发-ArkUI 鸿蒙沉浸式标题栏实践 根据鸿蒙官网文档，应用沉浸式效果有2种实现方式：

  1. 全屏，如果你不想UI内容和状态栏（手机信号电量那一栏）导航栏（小白条或者三大金刚键那条）重叠，就自己写padding让出对应区域。

  2. 安全区，使用安全区的话，你的UI布局会默认让出状态栏和导航栏区域，此时如果你想实现沉浸效果，可以给window设置个背景颜色，也可以使用expandSafeArea。expandSafeArea简单地说，就是让你的UI顶部或者底部的背景扩展到状态栏和导航栏。

以上2点不赘述，具体看官网文档

我的项目中想实现一个通用的标题栏组件，如果不实现沉浸效果，那是这样的：

这显然不行，老板会骂人的

那就使用expandSafeArea把标题栏的背景蓝色扩展到状态栏试试，效果和代码如下：

什么玩意，蓝色怎么只到状态栏？（这里说明一下，标题栏文字和图标都是白色，所以没背景后就看不见了，这里我也被坑了一把）

然后，发现文档里有这么一段描述：

配置expandSafeArea属性组件进行绘制扩展时，需要关注组件不能配置固定宽高尺寸，百分比除外。

为啥？为啥只能用百分比？

我的标题栏高度是45，只能艰难地换算成百分比，代码和实际效果如下，总算是实现了效果


更多关于HarmonyOS 鸿蒙Next 应用开发-ArkUI 鸿蒙沉浸式标题栏实践的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next 应用开发-ArkUI 鸿蒙沉浸式标题栏实践的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，进行ArkUI沉浸式标题栏实践时，关键在于确保应用的内容能够延伸到状态栏下方，实现全屏显示效果。以下是如何实现这一点的步骤概述：

  1. 配置config.json：在应用的config.json文件中，设置window配置项下的statusBarStyle为dark或light，并启用transparent属性，使状态栏透明。例如：

    "window": {
    "statusBarStyle": "dark",
    "transparent": true
}

  2. 调整布局：在ArkUI的页面布局中，使用Padding组件或调整容器组件的top属性，为状态栏留出空间。通常，这个空间的高度等于状态栏的高度，可以通过系统API获取。

  3. 设置系统UI可见性：在ArkUI中，可以通过系统API调用设置系统UI的可见性，确保状态栏和导航栏不会遮挡内容。这通常涉及到请求系统权限和调用相应的系统方法。

  4. 适配不同设备：考虑到不同设备的状态栏高度可能不同，建议使用动态获取状态栏高度的方法，以确保沉浸式效果在不同设备上的一致性。

通过上述步骤，你可以在HarmonyOS鸿蒙系统中实现ArkUI应用的沉浸式标题栏。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部