HarmonyOS 自定义键盘弹起后遮住输入框

​输入框在屏幕底部,弹出自定义键盘后遮住了输入框,如何将相应布局向上移动?

HarmonyOS
2024-10-18 10:02:06
浏览
已于2024-10-18 10:06:16修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以创建一个变量screenHeight,并把它赋值为当前显示区域的高度。监听系统规避区域的变化事件,判断是否是由于软键盘的弹出或收起导致的。如果是,则就获取软键盘的高度。然后,将screenHeight的值设置为原始高度减去软键盘的高度。这样,显示区域就会缩小,避免和软键盘重叠。参考demo:

import window from '@ohos.window';  
@Entry  
@Component  
struct Index {  
 @State screenHeight: number = 0;  
 aboutToAppear() {  
window.getLastWindow(getContext(this)).then(currentWindow =>{  
     let property = currentWindow.getWindowProperties();  
     let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);  
     // 初始化显示区域高度  
     this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);  
     // 监视软键盘的弹出和收起  
     currentWindow.on('avoidAreaChange', async data => {  
       if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {  
         return;  
       }  
       this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);  
     })  
   })  
 }  
 build() {  
   Row() {  
     Column() {  
       Text('请输入短信验证码')  
         .fontSize(30)  
         .margin({  
           bottom:'50'  
         })  
       TextInput()  
         .width('70%')  
         .height('150px')  
         .margin({  
           bottom: '30'  
         })  
       Button('确定')  
         .width('70%')  
         .margin('20px')  
     }  
     .width('100%')  
   }  
   .width('100%').height(this.screenHeight)  
 }  
}
分享
微博
QQ
微信
回复
2024-10-18 17:50:33
相关问题
HarmonyOS 自定义键盘不能顶起输入框
281浏览 • 1回复 待解决
H5页面输入框自动获焦弹起键盘
1700浏览 • 1回复 待解决
HarmonyOS 自定义键盘
187浏览 • 1回复 待解决
HarmonyOS 输入框无法对齐
307浏览 • 1回复 待解决
HarmonyOS 监听输入框删除键
59浏览 • 1回复 待解决
HarmonyOS TextInput自定义键盘
322浏览 • 1回复 待解决