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

作者：猫林老师

2024-12-18
广东
本文字数：4240 字
阅读完需：约 14 分钟

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

第九天 - 解决上下两栏白边 - 沉浸式效果

预览器上下两栏白边

自从 HarmonyOS 升级到 release 版后，很多同学会问猫林老师：为什么他的预览器上下有白边，为什么明明根容器写了宽高百分百但没铺满。如下图

白边原因

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

沉浸式效果介绍

根据上面说的白边情况，如果你的 app 背景色正好也是白色，那么可以和上下白边融为一体，显得不那么突兀。但如果你的 app 是别的颜色，那么可能会有明显的突兀感。
举个例子：大家经常用的美团。我们看看它目前的情况，以及假设有白边的情况
这是美团正常情况，会看到顶部是黄色，状态栏也变为黄色，视觉效果上浑然一体
以下假设状态栏白色
可以看到视觉效果上会比较突兀
通过对比我们发现，确实在实际 app 开发过程中，状态栏上可以不放任何界面元素，但是需要将状态栏的颜色定义的与 app 背景色保持一致，才会视觉上显得更好看，更融为一体。像这样的效果，我们称之为沉浸式效果
通过上面的描述我们已经发现沉浸式效果能提供比较好的视觉效果，但如何实现呢？
有三种方案都可以实现：
通过设置 Window 背景色来实现
通过调用窗口强制全屏布局接口 setWindowLayoutFullScreen() + padding 避让实现（麻烦）
直接使用扩展到避让区功能

通过设置 Window 背景色实现沉浸式

设置窗体背景色实现
先看不设置的情况下，我们写的一个宽高百分百，且背景颜色为红色的界面，如下图，可以看到状态栏和整体背景色不一致，有明显突兀感
此时，我们可以设置窗体全局背景色也为红色实现视觉沉浸，来到EntryAbility.ets,找到onWindowStageCreate生命周期函数，在windowStage.loadContent回调里设置如下代码即可

    windowStage.getMainWindowSync().setWindowBackgroundColor('#ff0000')

复制代码

注意：这里只能给 16 进制颜色，且必须满 6 位
效果如下
此时浑然一体
这种方法虽然简单，但有缺点：
预览器依然会有白边，只有模拟器或真机运行才能看到效果
它写死了颜色，每个 App 里不管是哪个页面都是此颜色，假如你 App 里多个页面的主题颜色不一样，会导致非常突兀，如下图

使用 setWindowLayoutFullScreen 实现沉浸式

这是 Window 提供的一个方法，可以设置让 App 整屏（即覆盖状态栏与导航栏）实现整块屏幕都可以布局，但是大部分使用时必须配合避让偏移，否则会有问题。至于什么问题呢，我们往下看。
首先来到EntryAbility.ets，继续找到onWindowStageCreate生命周期函数，在windowStage.loadContent回调里设置如下代码即可

  windowStage.getMainWindow().then(w => {      // 设置占用全屏      w.setWindowLayoutFullScreen(true)  })

复制代码

这样虽然实现了沉浸式效果，但也存在了问题，例如，我们第一页中本来有 Button，但是此时 Button 位置跑到原来的状态栏去了，如下图
这样的话，会导致原本不该布局的区域也会存在我们的布局元素。第一巨丑，第二用户也点击不了。
因此，我们使用这个方法实现沉浸式时，一般还要做让页面根容器 padding 避让。也即让我们布局的组件，通过 padding 的方式挪动他们位置，避让原本的状态栏和导航栏。
例：

  Column() {      Button('去下一页')        .onClick(() => {          router.pushUrl({            url: 'pages/Second'          })        })    }    .width('100%')    .height('100%')    .backgroundColor(Color.Red)    .padding({ top: 50, bottom: 50 })

复制代码

此时，我们发现写的按钮确实不会被刘海屏挡住了。但是细心的同学发现了，我们这里写死的 50vp。不合理，有可能给少了，也有可能给多了。毕竟不同设备的状态栏可能不一样。所以如果我们使用这种方案还需要获取屏幕的状态栏与导航栏的高度。然后把高度存到本地存储里，方便所有页面都可以使用并设置 padding
具体步骤：继续来到onWindowStageCreate，填写如下代码

  onWindowStageCreate(windowStage: window.WindowStage): void {      // Main window is created, set main page for this ability      hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');        windowStage.loadContent('pages/Index', (err) => {        // windowStage.getMainWindowSync().setWindowBackgroundColor('#ff0000')        if (err.code) {          hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');          return;        }                // 以下是设置沉浸式，以及获取设备导航条、状态栏高度的代码        windowStage.getMainWindow().then(w => {          // 设置沉浸式           w.setWindowLayoutFullScreen(true)          // 获取设备区域参数          let avoidArea = w.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)          let bottomRectHeight = avoidArea.bottomRect.height; // 获取到导航条区域的高度          AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); // 存到本地存储          let topRectHeight = avoidArea.topRect.height; // 获取状态栏区域高度          AppStorage.setOrCreate('topRectHeight', topRectHeight); // 存到本地存储            // 当区域发生改变（例如竖屏变横屏）,重新获取一次再保存          w.on('avoidAreaChange', (data) => {            if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {              let topRectHeight = data.area.topRect.height;              AppStorage.setOrCreate('topRectHeight', topRectHeight);            } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {              let bottomRectHeight = data.area.bottomRect.height;              AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);            }          });        })        hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');      });    }

复制代码

好了，上面每句代码都有注释，可以根据注释去理解。当然咯，我知道你们没兴趣看代码，所以需要用可以直接复制，反正这个代码是固定的
然后来到页面里，先取出本地存储的值，且用 @StorageProp 装饰器，设置状态自动更新。

    @StorageProp('bottomRectHeight')    bottomRectHeight: number = 0;    @StorageProp('topRectHeight')    topRectHeight: number = 0;

复制代码

然后把这两个变量，设置给根容器的 padding 即可

    @StorageProp('bottomRectHeight')    bottomRectHeight: number = 0;    @StorageProp('topRectHeight')    topRectHeight: number = 0;      build() {      Column() {        Button('去下一页')          .onClick(() => {            router.pushUrl({              url: 'pages/Second'            })          })      }      .width('100%')      .height('100%')      .backgroundColor(Color.Red)      .padding({ top: px2vp(this.topRectHeight), bottom: px2vp(this.bottomRectHeight) })

复制代码

同样的，其他页面也如此设置即可
这样，我们通过一系列操作。以及一段代码实现了沉浸式效果。但大家也发现明显的缺点
预览器依然没效果，需要真机或模拟器查看
代码过多。好多没耐心的同学看到这，可能都已经烦躁的想打人了
这样子会让所有页面都被迫使用沉浸式，如果哪个页面不需要沉浸式，还需要再此页面的 about 里禁用

     aboutToAppear(): void {         window.getLastWindow(getContext())           .then(win => {             win.setWindowLayoutFullScreen(false)           })     }

复制代码

因此，我们还有最为简单的一种方式，请往下继续看

使用 expandSafeArea 设置沉浸式（推荐）

expandSafeArea 是一个按需方式的沉浸式方案，它能完美起到哪个页面需要沉浸式，就在哪个页面使用即可，绝对不会让整个 App 每个页面都强制沉浸式。而且使用起来非常简单，只需要在需要沉浸式的页面的根容器里设置即可，例

  Column() {        Button('去下一页')          .onClick(() => {            router.pushUrl({              url: 'pages/Second'            })          })      }      .width('100%')      .height('100%')      .backgroundColor(Color.Red)      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

复制代码

解释：参数 1 固定，参数 2 是设置需要沉浸式的区域，SafeAreaEdge.TOP代表上面状态栏沉浸式，SafeAreaEdge.BOTTOM代表下面导航栏沉浸式，此时效果如下
没错，此时不需要启动模拟器，预览器也可以直接看到效果！
当然，你也可以只设置让顶部沉浸式，则第二个参数只要写一个 TOP 即可，如下代码

  Column() {        // 生略里面代码    }      .width('100%')      .height('100%')      .backgroundColor(Color.Red)      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

复制代码

效果如下

扩展思考：setWindowLayoutFullScreen 是否很鸡肋？

同学们到目前为止，发现实现沉浸式我们用了三种方案。其中第一种设置 Window 背景色可以无视掉，这种方法我们基本不会用。而第二种方法能实现，但又比较麻烦，第三种是最容易也最推荐的方式。
但此时请我们思考下：setWindowLayoutFullScreen 是否真的一点应用场景都没有？
要想回答这个问题，我们可以从 setWindowLayoutFullScreen 的特点入手，大家还记得吗？setWindowLayoutFullScreen 最大的特点是让 app 所有页面都强制全屏（沉浸式），那么大家仔细想想，有没有哪种 App 是需要任意页面都强制全屏的呢？
没错，答案是游戏！如下图
像这样的，如果以后是游戏类 App，我们必然需要使用 setWindowLayoutFullScreen 一次性设置所有页面全屏
因此，这个方法，大家也需要有点印象哦！万一哪天要用到呢？
请思考：还有没有除了游戏以外也可能要用到 setWindowLayoutFullScreen 的场景呢？把你的想法可以打在评论区

发布于: 刚刚阅读数: 5

猫林老师

关注

还未添加个人签名 2024-12-06 加入

还未添加个人简介

发布

暂无评论

创作场景

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

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

第九天 - 解决上下两栏白边 - 沉浸式效果

预览器上下两栏白边

白边原因

沉浸式效果介绍

通过设置 Window 背景色实现沉浸式

使用 setWindowLayoutFullScreen 实现沉浸式

使用 expandSafeArea 设置沉浸式（推荐）

扩展思考：setWindowLayoutFullScreen 是否很鸡肋？

猫林老师

评论