HarmonyOS鸿蒙Next中怎么修改实现软键盘避让啊啊啊

HarmonyOS鸿蒙Next中怎么修改实现软键盘避让啊啊啊

onWindowStageCreate(windowStage: window.WindowStage): void {
 
  try {
    windowStage.getMainWindow().then((windowObj: window.Window) => {
      try {
        windowStage.loadContent(this.page).then(() => {
          UIContextSelf.setUIContext(windowObj);
          WindowService.getInstance().initWindowObj(windowObj);
        }).catch(() => {
        })
      } catch (error) {
      }
    }).catch(() => {
    });
  } catch (error) {
  }
}

我的entryAbility的这个方法 怎么修改实现软键盘避让呢 // 压缩模式

windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);


更多关于HarmonyOS鸿蒙Next中怎么修改实现软键盘避让啊啊啊的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

软键盘布局适配

软键盘是用户进行交互的重要途径之一，同时软键盘的弹出和收起，可能会影响到正在显示的UI元素，影响用户体验，出现如下常见的软键盘布局适配问题：

  • 重要信息被软键盘遮挡：当软键盘弹出时，输入框或其它重要UI元素可能会被键盘遮挡，导致用户无法看到或访问它们。
  • 软键盘弹出导致布局错位：内容可能会不恰当上移，影响用户体验。
  • 软键盘弹出导致弹窗过度上抬：弹窗被键盘上顶，造成不好的体验。

本文将介绍以下知识帮助开发者了解软键盘的弹出和收起的控制、避让机制以及软键盘常见问题的解决方法。

软键盘的弹出收起和监听

用户点击输入框时，软键盘默认弹出。但在特定场景下，需要对软键盘的弹出和收起进行控制，如点击空白区域收起软键盘，进入页面时输入框主动获焦。开发者还需根据软键盘状态和高度调整页面布局。

软键盘避让模式

当用户在输入时，为了确保输入框不会被键盘遮挡，系统提供了避让模式来解决这一问题。开发者可以通过setKeyboardAvoidMode控制虚拟键盘抬起时页面的避让模式，键盘抬起时默认页面避让模式为上抬模式，下面列举了几种常见的避让模式。

  • 上抬模式（KeyboardAvoidMode.OFFSET）：为了避让软键盘，Page内容会整体上抬。如下示例代码，软键盘弹出时，页面整体上抬：
import { KeyboardAvoidMode, window } from '@kit.ArkUI';
import { UIAbility } from '@kit.AbilityKit';
export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/GetSafeAreaHeightDemo', (err) => {
      // Lift up mode
      windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);
    });
  }
}

cke_1158.png

压缩模式（KeyboardAvoidMode.RESIZE）：当软键盘高度改变时，调整Page大小。Page下设置百分比宽高的组件会跟随压缩，直接设置宽高的组件保持固定大小。设置KeyboardAvoidMode.RESIZE时，expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.BOTTOM])不生效。

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/GetSafeAreaHeightDemo', (err) => {
      // Compression mode
      windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
    });
  }
}

cke_2993.png

不避让模式（KeyboardAvoidMode.NONE）：软键盘将直接覆盖页面UI，不会触发界面布局调整。例如在全屏沉浸式场景（游戏/视频播放器等），为保障用户体验的完整性，开发者可以使用KeyboardAvoidMode.NONE模式。

aboutToAppear(): void {
  this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.NONE);
}

弹窗类组件避让模式

弹窗类组件（如Dialog、Popup、Menu、BindSheet等）避让模式有KeyboardAvoidMode.DEFAULT（避让）和KeyboardAvoidMode**.**NONE（不避让）两种，通过BaseDialogOptions中的keyboardAvoidMode属性，灵活控制是否避让软键盘。

若未指定弹窗避让模式，则其避让行为受页面避让模式影响。例如当通过setKeyboardAvoidMode()方法设置页面避让模式为KeyboardAvoidMode**.**NONE时，则弹窗也不会避让软键盘。

this.getUIContext().getPromptAction().openCustomDialog({
  builder: () => {
    this.customDialogBuilder();
  },
  alignment: DialogAlignment.Bottom,
  width: '100%',
  // Set not avoid keyboard
  keyboardAvoidMode: KeyboardAvoidMode.NONE,
});

更多关于HarmonyOS鸿蒙Next中怎么修改实现软键盘避让啊啊啊的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，修改软键盘避让可通过调整窗口属性实现。使用windowClass的avoidKeyboard属性，设置为AVOID_KEYBOARD_TYPE_DEFAULT或AVOID_KEYBOARD_TYPE_ADJUST_PAN。在UIAbility的onWindowStageCreate生命周期中，通过window.getMainWindowSync()获取窗口对象并设置。同时，在ArkUI页面布局中，确保使用响应式布局组件如Flex、Column等，系统会自动调整。

在HarmonyOS Next中，实现软键盘避让的核心是正确设置窗口的键盘避让模式。根据你提供的代码，修改建议如下：

在你的 onWindowStageCreate 方法中，获取到 windowObj 后，调用其 getUIContext() 方法获取 UIContext 对象，然后使用 setKeyboardAvoidMode 方法设置避让模式。

修改后的代码示例：

onWindowStageCreate(windowStage: window.WindowStage): void {
  try {
    windowStage.getMainWindow().then((windowObj: window.Window) => {
      try {
        // 关键修改：设置键盘避让模式
        windowObj.getUIContext().setKeyboardAvoidMode(window.KeyboardAvoidMode.RESIZE);
        
        windowStage.loadContent(this.page).then(() => {
          UIContextSelf.setUIContext(windowObj);
          WindowService.getInstance().initWindowObj(windowObj);
        }).catch(() => {
        })
      } catch (error) {
      }
    }).catch(() => {
    });
  } catch (error) {
  }
}

关键点说明：

  1. 调用位置：在 windowStage.getMainWindow().then() 的成功回调中，获取到 windowObj 后立即设置。
  2. 方法链：windowObj.getUIContext().setKeyboardAvoidMode(...)。
  3. 模式选择：你示例中使用的 window.KeyboardAvoidMode.RESIZE 是有效的。这是最常用的模式，它会调整窗口布局以避免键盘遮挡。其他可选模式包括 OFF（关闭避让）和 AUTO（自动，通常效果同 RESIZE）。

确保导入模块：代码文件顶部需要导入 window 模块。

import window from '@ohos.window';

这样修改后，当软键盘弹出时，应用窗口的内容区域会自动调整（通常为向上平移或压缩），确保输入框等焦点组件不被键盘遮挡。

回到顶部