2.4 实现沉浸式体验的状态栏 原创 精华

发布于 2022-5-6 19:20
浏览
1收藏

这一节,我们为App实现沉浸式体验的状态栏。

首先,我们在index页面中实现一个最基本的页面,只有一个文本组件,同时,将页面背景设置莫兰迪三号颜色。代码如下:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('《鸿蒙开发ArkUI最佳实践》基于HarmonyOS 3.0,采用方舟开发框架eTS语言。系统讲解方舟开发框架核心技术和分布式特性,包含丰富案例和一个App实战项目,提供所有案例和实战项目的源码。——鸿蒙开发之南拳北腿')
        .fontSize(20)
    }.width('100%').height('100%').backgroundColor('#A6C2BE')
  }
}

在本地预览器中浏览效果,如下左图。然后在远程模拟器运行,效果如下右图:

2.4 实现沉浸式体验的状态栏-开源基础软件社区

在上述模拟器的效果中,发现了两个问题:

首先,文字内容上面出现了一个默认文字为"entry_MainAbility"的黑底标题栏,这个很影响App美观。其次,顶部手机信号、电量等图标的背景默认是黑色,如果也显示为莫兰迪三号色,那么App界面效果就不会有明显的割裂感。

下面,我们通过实现沉浸式体验的状态栏,解决上述问题。步骤如下:

配置config.json

在"abilities"节点中加入如下配置代码:

"metaData": {
    "customizeData": [
        {
            "name": "hwc-theme",
            "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"
        }
    ]
}

如下图所示位置:

2.4 实现沉浸式体验的状态栏-开源基础软件社区

MainAbility配置

在MainAbility.java文件中加入如下代码:

// 沉浸式状态栏
// 状态栏设置为透明
getWindow().addFlags(WindowManager.LayoutConfig.MARK_TRANSLUCENT_STATUS);

代码所在位置如下图所示:

2.4 实现沉浸式体验的状态栏-开源基础软件社区

设置手机上边距

在index页面中设置上边距48vp,防止内容被手机状态栏遮挡,完整代码如下:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('《鸿蒙开发ArkUI最佳实践》基于HarmonyOS 3.0,采用方舟开发框架eTS语言。系统讲解方舟开发框架核心技术和分布式特性,包含丰富案例和一个App实战项目,提供所有案例和实战项目的源码。——鸿蒙开发之南拳北腿')
        .fontSize(20)
    }.width('100%').height('100%').backgroundColor('#A6C2BE').padding({top:48})
  }
}

最终效果如下图:

2.4 实现沉浸式体验的状态栏-开源基础软件社区

[源码地址:https://gitee.com/cloudev/harmonyos3/tree/master/2.4]

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐