2.4 实现沉浸式体验的状态栏 原创 精华
华哥的全栈次元舱
发布于 2022-5-6 19:20
5418浏览
2收藏
这一节,我们为App实现沉浸式体验的状态栏。
首先,我们在index页面中实现一个最基本的页面,只有一个文本组件,同时,将页面背景设置莫兰迪三号颜色。代码如下:
在本地预览器中浏览效果,如下左图。然后在远程模拟器运行,效果如下右图:
在上述模拟器的效果中,发现了两个问题:
首先,文字内容上面出现了一个默认文字为"entry_MainAbility"的黑底标题栏,这个很影响App美观。其次,顶部手机信号、电量等图标的背景默认是黑色,如果也显示为莫兰迪三号色,那么App界面效果就不会有明显的割裂感。
下面,我们通过实现沉浸式体验的状态栏,解决上述问题。步骤如下:
配置config.json
在"abilities"节点中加入如下配置代码:
如下图所示位置:
MainAbility配置
在MainAbility.java文件中加入如下代码:
代码所在位置如下图所示:
设置手机上边距
在index页面中设置上边距48vp,防止内容被手机状态栏遮挡,完整代码如下:
最终效果如下图:
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
赞
6
收藏 2
回复
6
1
2
相关推荐
老师,这个方法在新版本DevEco Studio 3.0.0.991不起作用了,怎么办?