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

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

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

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

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

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

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

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

配置config.json

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

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

如下图所示位置：

MainAbility配置

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

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

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

设置手机上边距

在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})
  }
}

最终效果如下图：

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