在鸿蒙应用开发中,我们针对键盘遮挡问题,通过窗口设置键盘遮挡模式来解决。目前键盘遮挡界面时,可以压缩窗口UI 或者 将窗口UI向上抬起两种方式:
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.****img.cn/direct/a724bf42c1aa482cb79267f357125e6d.png