关于软键盘弹出遮挡问题

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

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

HarmonyOS

HearMe_cn

2024-05-26 14:09:28

浏览

回答 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) 
·           } 
·         }

实现效果

弹出前：