HarmonyOS 鸿蒙Next如何实现页面的背景图显示整个屏幕 包括上下的状态栏和导航条 但状态栏的时间和电量等还是显示

HarmonyOS 鸿蒙Next如何实现页面的背景图显示整个屏幕 包括上下的状态栏和导航条 但状态栏的时间和电量等还是显示 如何实现页面的背景图显示整个屏幕，包括上下的状态栏和导航条？但是状态栏的时间和电量等还是显示。

之前写了下面的代码，后面系统更新了就不生效了。

expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 图片组件的绘制区域扩展至状态栏和导航条。
5 回复

参考我写的demo，也许是你定义的层级不对，我写在了最外层的Row标签下可以生效

另外，最新的鸿蒙市场上架规格中明确表示：图不能遮挡状态栏和挖孔区

即图背景色和状态栏图标要有区分度，例：深色状态栏图标和浅色系背景图的搭配是一种合理场景

build() {
    Row() {
      Image($r('app.media.startIcon'))
        .width(40).height(40)
    }
    .width('100%')
    .height(80)
    .backgroundColor("#D3D3D3")
    .justifyContent(FlexAlign.Center)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .border({
      radius: {
        topLeft: 130,
        topRight: 130,
        bottomLeft: 40,
        bottomRight: 80
      },
    })
  }

更多关于HarmonyOS 鸿蒙Next如何实现页面的背景图显示整个屏幕 包括上下的状态栏和导航条 但状态栏的时间和电量等还是显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我找到问题了，我自己在启动页面设置了statusBarColor: ‘#000000’，服了自己了，

我找到问题了，我自己在启动页面设置了statusBarColor: ‘#000000’，服了自己了，

我用这个里面的代码，发现状态栏还是显示成黑色，我的背景图没有渲染上去。

在HarmonyOS鸿蒙Next中，要实现页面背景图显示整个屏幕（包括上下的状态栏和导航条），同时保持状态栏的时间、电量等信息正常显示，可以通过以下方式实现：

  1. 设置全屏显示：

    • 在页面的布局文件中，确保根布局容器（如DirectionalLayout或DependentLayout）设置了全屏属性。可以通过设置布局参数或使用特定的布局属性来确保内容覆盖整个屏幕。

  2. 调整窗口属性：

    • 在页面的代码中，通过调用系统API调整窗口属性，使状态栏和导航条透明，同时保持状态栏内容（如时间和电量）可见。这通常涉及到对Window对象的操作，设置其属性如FLAG_LAYOUT_NO_LIMITS和FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS等。

  3. 绘制背景图：

    • 在布局文件中，为背景设置一张图片资源，并确保该图片资源覆盖整个布局容器。可以使用Image组件或设置容器的背景图片属性来实现。

  4. 确保状态栏内容可见：

    • 由于状态栏内容（如时间和电量）默认是绘制在系统层级的，因此在实现全屏显示时，这些内容通常会继续显示。但如果遇到不显示的情况，需要检查状态栏的透明度设置和是否有其他布局或视图遮挡了状态栏。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部