HarmonyOS 沉浸式状态栏实现

比如说我们代码是这样的

@Entry
@Component
struct Index {build() {Column() {Column() {Column() {Text('定标标题').fontSize(20).fontColor(Color.White)}.height(50).justifyContent(FlexAlign.Center)}.width('100%').backgroundColor('#FF0000')}.height('100%')}
}

你预览器上看着确实是没什么问题
在这里插入图片描述
但是我们真机运行一下会发现我们顶部还是空出了一条黑的

那么如果设计要求将这个地方填满请问阁下又该如何应对？

我们如下图所示找到这个 EntryAbility.ts
它的生命周期都是应用全局的
在这里插入图片描述
我们要操作的是 onWindowStageCreate 当应用窗口创建完成时触发的生命周期
改写代码如下

onWindowStageCreate(windowStage: window.WindowStage) {// 1.获取应用主窗口。let windowClass = null;windowStage.getMainWindow((err, data) => {if (err.code) {console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));return;}windowClass = data;console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));// 2.实现沉浸式效果：设置导航栏、状态栏不显示。let names = [];windowClass.setWindowSystemBarEnable(names, (err) => {if (err.code) {console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));return;}console.info('Succeeded in setting the system bar to be visible.');});windowClass.setWindowLayoutFullScreen(true)})// 3.为沉浸式窗口加载对应的目标页面。windowStage.loadContent("pages/Index", (err) => {if (err.code) {console.error('Failed to load the content. Cause:' + JSON.stringify(err));return;}console.info('Succeeded in loading the content.');});
}