HarmonyOS 鸿蒙Next使用安全区顶部沉浸，弹出键盘后顶部沉浸失效

HarmonyOS 鸿蒙Next使用安全区顶部沉浸，弹出键盘后顶部沉浸失效

代码如下


更多关于HarmonyOS 鸿蒙Next使用安全区顶部沉浸，弹出键盘后顶部沉浸失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

针对HarmonyOS 鸿蒙Next使用安全区顶部沉浸，弹出键盘后顶部沉浸失效的问题，这通常是由于软键盘弹出后，界面布局发生了调整，导致原本设置的沉浸式效果被破坏。以下是一些可能的解决方案：

  1. 检查布局文件：确保你的布局文件中正确设置了expandSafeArea属性，使组件能够突破安全区域限制，实现沉浸式效果。同时，检查是否有其他布局属性或约束影响了沉浸式效果的实现。
  2. 调整窗口布局：通过调用setWindowLayoutFullScreen接口，将应用主窗口设置为全屏布局，有助于实现沉浸式效果。但需注意，全屏布局可能会影响系统的状态栏和导航栏显示。
  3. 处理软键盘弹出事件：在软键盘弹出时，监听相关事件并动态调整界面布局，以保持沉浸式效果不被破坏。
  4. 查阅官方文档：HarmonyOS的官方文档提供了关于实现沉浸式效果的详细指导，建议查阅最新版本的文档，了解是否有关于此问题的更新或变更。

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

更多关于HarmonyOS 鸿蒙Next使用安全区顶部沉浸，弹出键盘后顶部沉浸失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


注意：正常情况下手机屏幕上方和下方会保留一个定的避让区域，其余区域都是安全区域

如何设置沉浸式效果

使用windowStage的设置全屏的方式 在ability中通过getMainWindow可以获取主窗体，然后通过得到的window对象设置全屏即可实现

windowStage.getMainWindow().then(window => {
  window.setWindowLayoutFullScreen(true)
})

通过这种方式最简单，但是相当于给所有的页面都设置了沉浸式，如果某些页面不需要设置沉浸式，还需要在页面中通过获取window来关闭

aboutToAppear(): void {
  window.getLastWindow(getContext())
    .then(win => {
      win.setWindowLayoutFullScreen(false)
    })
}

安全区域expandSafeArea

相对于上述通过window设置所有页面进行全局的设置，expandSafeArea是个按需的方式，哪个页面需要使用

沉浸式，直接自己设置即可。

作用控制组件扩展其非安全区域。

      Image($r("app.media.dog1"))
        .width(100)
        .height(50)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

键盘避让模式

基本介绍 当我们存在输入框的页面，如果点击输入框，此时就会弹出键盘，此时键盘的弹出会出问题，如下图

代码示例

[@Entry](/user/Entry)
  [@Component](/user/Component)
  struct Index {
 
    build() {
      Column() {
        Row() {
          Text("顶部内容")
        }
        .justifyContent(FlexAlign.Center)
          .height(50)
          .width('100%')
        Column() {
          Text("中间内容")
        }
        .justifyContent(FlexAlign.Center)
          .backgroundColor(Color.Orange)
          .width('100%')
          .layoutWeight(1)
        Row() {
          TextInput({ placeholder: '请输入内容' })
            .width('100%')
        }
        .padding({
          left: 10,
          right: 10
        })
          .justifyContent(FlexAlign.Center)
          .height(50)
          .width('100%')
      }
      .width('100%')
        .height('100%')
    }
  }

我们可以设置键盘的避让模式，让窗口被键盘压缩，默认情况下，窗口和键盘的情况是这样的

用法

import { KeyboardAvoidMode } from '[@kit](/user/kit).ArkUI';
let keyboardAvoidMode = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
// 设置虚拟键盘抬起时压缩页面大小为减去键盘的高度
windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
回到顶部