HarmonyOS 鸿蒙Next 虚拟键盘弹出导致页面高度变小

我给页面设置了高度 height:100vh；并给页面底部的一个按钮设置了绝对定位 position: absolute; bottom: 4%;
结果点击输入框弹出虚拟键盘之后，按钮的位置变成了除键盘区域外剩下区域距离底部距离的4%，即按钮是在虚拟键盘之上的，但实际我想让键盘弹出后把按钮给遮挡住
如果我给页面设置高度为固定值，即height:500px；就能实现我想要的效果。
所以是不是虚拟键盘弹出后，100vh的具体高度是变小的？

更多关于HarmonyOS 鸿蒙Next 虚拟键盘弹出导致页面高度变小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼•16 小时前

可以为web组件设置.expandSafeArea([SafeAreaType.KEYBOARD])。

更多关于HarmonyOS 鸿蒙Next 虚拟键盘弹出导致页面高度变小的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•16 小时前

针对HarmonyOS 鸿蒙Next虚拟键盘弹出导致页面高度变小的问题，这通常是由于软键盘弹出时，页面布局未能正确调整以适应新的屏幕空间。以下是一些专业的解决方法：

监听软键盘高度变化：通过监听软键盘的弹出和收起事件，动态调整页面布局。当软键盘弹出时，减少页面整体高度；当软键盘收起时，恢复页面高度。
设置软键盘避让模式：利用ArkUI提供的setKeyboardAvoidMode方法，设置键盘遮挡模式为KeyboardAvoidMode.RESIZE，使页面在键盘弹出时自动调整布局，避免遮挡。
优化页面布局：确保页面布局具有足够的灵活性，能够自适应不同高度的屏幕空间。可以使用弹性布局（Flexbox）或约束布局（ConstraintLayout）等现代布局技术来实现。
检查组件属性：确保页面中的组件属性设置正确，如文本框的焦点设置等，避免因属性设置不当而导致的布局问题。

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