HarmonyOS鸿蒙开发 - 解决上下两栏白边 - 沉浸式效果

最新推荐文章于 2025-02-22 17:06:48 发布

猫林老师

最新推荐文章于 2025-02-22 17:06:48 发布

阅读量1.4k

点赞数 15

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/weixin_48845475/article/details/144377120

版权

鸿蒙应用开发从入门到入行

其实上面的白边，称之为状态栏。上面会放手机wifi信号、电池电量等信息。一般情况下我们不需要把应用中具有交互效果的界面延伸到上面去，免得影响操作。
同样，下面的白边称之为导航栏，也即切换手机内应用的地方。会有一个小横条方便你切换不同应用以及回到桌面。
如下图所示
而HarmonyOS升级到release版本后，特意在预览器里把这上下两栏给你留白空出来，就是为了方便让开发者知道，自己的界面并没占用这两个区域，所以一般情况下，如果你的应用整体背景颜色就是白色的，其实是无需处理的。

根据上面说的白边情况，如果你的app背景色正好也是白色，那么可以和上下白边融为一体，显得不那么突兀。但如果你的app是别的颜色，那么可能会有明显的突兀感。
举个例子：大家经常用的美团。我们看看它目前的情况，以及假设有白边的情况

这是美团正常情况，会看到顶部是黄色，状态栏也变为黄色，视觉效果上浑然一体
以下假设状态栏白色

可以看到视觉效果上会比较突兀
通过对比我们发现，确实在实际app开发过程中，状态栏上可以不放任何界面元素，但是需要将状态栏的颜色定义的与app背景色保持一致，才会视觉上显得更好看，更融为一体。像这样的效果，我们称之为沉浸式效果
通过上面的描述我们已经发现沉浸式效果能提供比较好的视觉效果，但如何实现呢？
有三种方案都可以实现：
- 通过设置Window背景色来实现
- 通过调用窗口强制全屏布局接口setWindowLayoutFullScreen() + padding避让实现（麻烦）
- 直接使用扩展到避让区功能

这是Window提供的一个方法，可以设置让App整屏（即覆盖状态栏与导航栏）实现整块屏幕都可以布局，但是大部分使用时必须配合避让偏移，否则会有问题。至于什么问题呢，我们往下看。
首先来到EntryAbility.ets，继续找到onWindowStageCreate生命周期函数，在windowStage.loadContent回调里设置如下代码即可
```
windowStage.getMainWindow().then(w => {
     
    // 设置占用全屏
    w.setWindowLayoutFullScreen(true)
})
```
这样虽然实现了沉浸式效果，但也存在了问题，例如，我们第一页中本来有Button，但是此时Button位置跑到原来的状态栏去了，如下图
这样的话，会导致原本不该布局的区域也会存在我们的布局元素。第一巨丑，第二用户也点击不了。
因此，我们使用这个方法实现沉浸式时，一般还要做让页面根容器padding避让。也即让我们布局的组件，通过padding的方式挪动他们位置，避让原本的状态栏和导航栏。

例：

Column() {
     
    Button('去下一页')
      .onClick(() => {
     
        router.pushUrl(