【HarmonyOS】键盘遮挡输入框UI布局处理

【HarmonyOS】键盘遮挡输入框UI布局处理

问题背景:

在开发输入框UI时,特别是登录页面的密码输入框靠下,或者是评论底部的pop弹框。

当我们输入框获得焦点后,键盘自下而上显示,一般情况下会遮挡住我们的UI布局。
导致用户输入时,键盘遮挡看不到自己输入的内容。

解决方案:

在鸿蒙应用开发中,我们针对键盘遮挡问题,通过窗口设置键盘遮挡模式来解决。目前键盘遮挡界面时,可以压缩窗口UI 或者 将窗口UI向上抬起两种方式:

dart 复制代码
import { KeyboardAvoidMode, UIContext } from '@kit.ArkUI';

aboutToAppear(): void {
  this.uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
}

// 需要注意的是,这里的上下文uiContext是窗口级别的上下文UIContext,并不是普通context。

 this.uiContext = this.getUIContext(); // √
  this.uiContext = getContext(); // x


// uiContext最方便的获取方式是,在当前界面中通过:
  this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);

// 当在逻辑类中想要拿到uiContext就只能通过单例或者AppStorage进行存储获取。例如:

import { KeyboardAvoidMode, UIContext } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/Index', (err, data) => {
    	globalThis.SysContext = windowStage.getMainWindowSync().getUIContext(); 
    	
		// 或者你的整个app都需要应用键盘遮挡模式,就可以直接在window创建的时候进行设置,没必要每个界面内调用设置。
      uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
      if (err.code) {
        return;
      }
    });
  }

1.界面UI压缩 KeyboardAvoidMode.RESIZE

2.界面UI抬起 KeyboardAvoidMode.OFFSET

当被抬起的界面中有不需要抬起的控件,如上图所示,其中的的标题栏控件就设置了 .expandSafeArea([SafeAreaType.KEYBOARD])}。

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/a724bf42c1aa482cb79267f357125e6d.png

相关推荐
爱笑的眼睛118 分钟前
HarmonyOS Stage 模型深度解析:构建现代化、高性能应用
华为·harmonyos
安卓开发者4 小时前
鸿蒙NEXT自定义能力详解:从基础使用到高级技巧
华为·harmonyos
特立独行的猫a5 小时前
HarmonyOS 鸿蒙系统自带的 SymbolGlyph 图标组件详解
华为·harmonyos·图标·symbolglyph
2501_919749035 小时前
鸿蒙:使用EventHub实现多模块之间的通信
华为·harmonyos
2501_9197490311 小时前
鸿蒙:使用Emitter进行线程间通信
华为·harmonyos
SuperHeroWu713 小时前
【HarmonyOS 6】仿AI唤起屏幕边缘流光特效
华为·harmonyos·特效·鸿蒙6.0·流光·ai唤起·屏幕边缘
gcios15 小时前
鸿蒙-flutter 混合开发
harmonyos
特立独行的猫a15 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
安卓开发者16 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
云天徽上20 小时前
【数据可视化-106】华为2025上半年财报分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·华为·信息可视化·数据分析·pyecharts