关于软键盘弹出遮挡问题

1. 当弹出软键盘时,在输入框与软键盘之间的组件会被遮挡。

2. 当有scroll滑动组件中有输入框的时候,输入框顶不起来。

HarmonyOS
2024-05-26 14:09:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
sslijun

使用的核心API

AvoidAreaType:窗口内容需要规避区域的类型枚举。

核心代码解释

       AvoidAreaType 窗口内容需要规避区域的类型枚举。

·         import window from '@ohos.window'; 
·           
·         @Entry 
·         @Component 
·         struct ScrollExample { 
·           scroller: Scroller = new Scroller() 
·           private arr: number[] = [0, 1, 2, 3, 4, 5] 
·           @State scrollHeight: number = 0; 
·           @State isRebuild: boolean = false; 
·           @State keyHeight: number =0; 
·           @State text: string = '' 
·           
·           aboutToAppear() { 
·           
·             window.getLastWindow(getContext(this)).then(currentWindow =>{ 
·               /*let property = currentWindow.getWindowProperties(); 
·               let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);*/ 
·           
·           
·               currentWindow.on('avoidAreaChange', async data => { 
·                 //判断规避区是否是软键盘区域。 
·                 if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) { 
·                   this.keyHeight=0; 
·                   return; 
·                 } 
·                 //规避区的高度。 
·                 this.scrollHeight = px2vp( data.area.bottomRect.height); 
·               }) 
·             }) 
·           } 
·           
·           build() { 
·             Stack({ alignContent: Alignment.TopStart }) { 
·               Column() { 
·                 List(){ 
·                   ForEach(this.arr,(item:number)=>{ 
·                     ListItem(){ 
·                       Text(item.toString()) 
·                         .width('100%') 
·                         .height(150) 
·                         .backgroundColor(0xFFFFFF) 
·                         .borderRadius(15) 
·                         .fontSize(16) 
·                         .textAlign(TextAlign.Center) 
·                         .margin({ top: 10 }) 
·                     } 
·                   }) 
·                   ListItem(){ 
·                     TextInput({ text: this.text, placeholder: 'input your word...' }) 
·                       .placeholderFont({ size: 14, weight: 400 }) 
·                       .width(320) 
·                       .height(40) 
·                       .margin(20) 
·                       .fontSize(14) 
·                       .fontColor(Color.Black) 
·                       .backgroundColor(Color.White) 
·                   } 
·                 }.layoutWeight(1) 
·           
·                 Text('这是一个测试文本') 
·                   .width('100%') 
·                   .height(50) 
·                   .backgroundColor(Color.Red) 
·                   .margin({bottom: this.scrollHeight}) 
·               }.width('100%').height('100%').justifyContent(FlexAlign.Start) 
·           
·           
·             }.width('100%').height('100%').backgroundColor(0xDCDCDC) 
·           } 
·         }

实现效果

弹出前:

弹出后:

适配的版本信息

IDE:DevEco Studio 4.0.1.501

SDK:HarmoneyOS 4.0.10.7

分享
微博
QQ
微信
回复
2024-05-27 17:20:18
相关问题
如何控制软键盘弹出对页面的遮挡
1582浏览 • 1回复 待解决
如何判断软键盘是否弹出
872浏览 • 1回复 待解决
软键盘弹出时,页面的自适应
506浏览 • 1回复 待解决
鸿蒙软键盘弹出后,页面底部的按钮
3036浏览 • 0回复 待解决
API8 怎么隐藏软键盘
1525浏览 • 1回复 待解决
如何实现弹窗和软键盘的避让
657浏览 • 1回复 待解决
如何主动拉起软键盘,你知道吗?
1075浏览 • 1回复 待解决
H5页面输入框自动获焦弹起软键盘
568浏览 • 1回复 待解决
鸿蒙的WebView会遮挡其他控件问题
8032浏览 • 3回复 待解决