HarmonyOS 鸿蒙Next软键盘弹出将界面挤出屏幕外解决办法

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

HarmonyOS 鸿蒙Next软键盘弹出将界面挤出屏幕外解决办法

我的界面是类似微信聊天房间，上面是页面title，中间是消息列表list，最下方是输入框

问题：
当软键盘弹出来的时候整个页面会被顶起来，title超出屏幕不可见，偏移量是软键盘的高度

找了很久，没找到相关设置的api

解决办法：

首先监听软键盘：

    window.getLastWindow(this.context).then(window => {
window.on(‘keyboardHeightChange’, (data) => {
Logger.i(‘keyboardHeightChange:’ + data)
this.keyboardHeight = data
})
})

* 注意这个data的单位是px

对title动态设置margin Top值：

  @State keyboardHeight: number = 0


PageTitle()
.margin({ top: ${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.keyboardHeight}px })

这样界面被顶起来的时候下方输入框会被直接顶起来，title设置的margin值为软键盘的高度，title会继续显示在原始位置

Harmonyos Next教程
8 回复
感谢楼主分享，顺利解决，想问下有没有Socket相关封装的Demo之类的
感谢分享
感谢
可以解决问题，但按下 □ 异常就出来了，UI缺陷是真多

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

在Ability中设置

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

KeyboardAvoidMode.RESIZE：虚拟键盘抬起时压缩页面大小为减去键盘的高度

KeyboardAvoidMode.OFFSET：虚拟键盘抬起时把页面上抬直到露出光标

list.reverse()将数据倒置，再通过scroller控制滚动到最底部，目前我是这么实现的，效果还可以，官方api中没有像Android Recyclerview那样数据翻转的属性设置

针对HarmonyOS 鸿蒙Next软键盘弹出将界面挤出屏幕外的问题，可以采取以下解决办法：

首先，监听软键盘的高度变化。通过window模块的on('keyboardHeightChange')方法，可以实时获取软键盘的高度。当软键盘弹出时，该方法会返回一个表示软键盘高度的数据，单位通常为px。

其次，根据软键盘的高度动态调整界面布局。例如，如果界面顶部有标题栏（title），当软键盘弹出时，可以动态设置标题栏的marginTop值，使其等于软键盘的高度，从而保持标题栏在原始位置不被挤出屏幕外。

此外，还可以考虑设置软键盘的避让模式。在HarmonyOS中，可以通过windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode()方法设置软键盘的避让模式。其中，KeyboardAvoidMode.RESIZE模式会在虚拟键盘抬起时压缩页面大小为减去键盘的高度，而KeyboardAvoidMode.OFFSET模式则会把页面上抬直到露出光标。

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

回到顶部