HarmonyOS 鸿蒙Next 界面底部安全区域如何获取

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 界面底部安全区域如何获取

我已经设置了全屏模式
window.setWindowLayoutFullScreen(true)
并且组件上也用了 .expandSafeArea()
期望把底部的那个28高度的白色区域给挡住或者说赋颜色,请问有什么办法可以处理吗? 

5 回复

可以参考如下demo实现沉浸式,但是底部中间区域的那个底部导航条,不能设置颜色,也不能完整遮挡不显示。只能将底部导航栏的背景色进行设置。

@Entry

@Component

struct LayoutFullScreen{

  build() {

    Column() {

      Row() {

        Text('Top Row').fontSize(40).textAlign(TextAlign.Center).width('100%')

      }

      .backgroundColor('#F08080').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

    }

    .width('100%')

    .height('100%')

    .alignItems(HorizontalAlign.Center)

    .backgroundColor('#008000')

    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  }

} 

参考链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-develop-apply-immersive-effects-V13

更多关于HarmonyOS 鸿蒙Next 界面底部安全区域如何获取的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


页面容器组件上处理

HarmonyOS 鸿蒙Next 界面底部安全区域的设计主要是为了确保在各种设备(尤其是移动设备)上,应用界面能够正确地适配屏幕底部的特定区域,如导航栏或者可能存在的物理按键区域。这一安全区域的设计旨在避免关键内容被遮挡,提升用户交互体验。

在HarmonyOS中,开发者可以通过系统提供的API或XML布局文件中的属性来指定元素是否应该避开底部安全区域。例如,在XML布局中,可以使用layout_constraintBottom_toBottomOf等约束属性,并结合layout_marginBottom等属性来确保界面元素不会覆盖到底部安全区域。

同时,HarmonyOS还提供了相关的主题和样式配置,允许开发者为应用设置统一的底部安全区域处理策略。这些配置可以确保在不同设备和屏幕尺寸上,应用界面都能保持一致且美观的布局。

对于具体的实现细节,开发者可以参考HarmonyOS官方文档中的布局和UI设计指南,了解如何正确设置和使用底部安全区域的相关属性和方法。

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

window.setWindowLayoutFullScreen(true) 是针对全部页面,每个页面都要处理,在每个页面的父容器底部添加一个有背景色的padding,或是在跟目录的Navigation处理

可以参考如下demo实现沉浸式,但是底部中间区域的那个底部导航条,不能设置颜色,也不能完整遮挡不显示。只能将底部导航栏的背景色进行设置。

参考链接: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-develop-apply-immersive-effects-V13

@Entry
@Component
struct LayoutFullScreen{
  build() {
    Column() {
      Row() {
        Text('Top Row').fontSize(40).textAlign(TextAlign.Center).width('100%')
      }
      .backgroundColor('#F08080').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#008000')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}
回到顶部