软键盘弹出时,固定导航栏不滚动以及软键盘区域不遮盖组件(输入框)

软键盘弹出时,固定导航栏不滚动以及软键盘区域不遮盖组件(输入框)

HarmonyOS
2024-05-26 11:42:20
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

本文主要介绍:

一个页面设有Navigation导航栏和TextInput输入框,初次进入页面TextInput会自动获取焦点,软键盘弹出,导致内容区域会遮盖顶部状态栏的显示。

控制自动获取焦点,禁止一进入页面软键盘就弹出。

软键盘区域属于系统规避区域,固定导航栏不会滚动,但是软键盘会遮住部分内容的显示。

解决步骤:

1、给最外层容器设置安全区域。

2、给TextInput绑定焦点事件,focusable属性为true或false来控制当前是否获取焦点,以此来控制软键盘的弹出和收起。

3、使用窗口window的getWindowAvoidArea获取窗口内容规避的区域;若软键盘区域等与窗口内容重叠时,需要窗口内容整体上移来避免被键盘遮住。

4、当软键盘弹出时,在显示内容的底部添加一个空白文本Text,获取焦点时设置文本有内容,且设置行高lineHeight为键盘的显示高度(大概是300左右),失去焦点时再让文本内容为空。核心思路是通过三元表达式来对文本内容进行设置。

使用的OS能力及相关的核心API

核心代码解释

import window from '@ohos.window'; 
@Entry 
@Component 
struct ScrollExample { 
scroller: Scroller = new Scroller() 
private arr: number[] = [0, 1, 2, 3, 4, 5] 
controller: TextInputController = new TextInputController() 
@State flag: boolean = false; 
@State TextTest: string = '' 
@State TextTest1: string = '' 
@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; 
      } 
      // 由于aboutToAppear该生命周期在build函数之前就执行了,所以只设置一个Text文本的话会有一个bug,即键盘收起后,文本顶起的区域并不会收回,影响用户体验,因此这里就用了两个文本来实现效果 
      this.TextTest = (this.TextTest == '') ? '1' : '' 
      if (this.TextTest1 == '1') { 
        this.TextTest1 = '' 
      } 
      console.log(this.TextTest, 666) 
      this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height); 
    }) 
  }) 
} 
​ 
build() { 
  // 使用Stack容器来实现Navigation导航栏的固定 
  Stack({ alignContent: Alignment.TopStart }) { 
    Scroll(this.scroller) { 
      Column() { 
        ForEach(this.arr, (item:number) => { 
          Text(item.toString()) 
            .width('90%') 
            .height(150) 
            .backgroundColor(0xFFFFFF) 
            .borderRadius(15) 
            .fontSize(16) 
            .textAlign(TextAlign.Center) 
            .margin({ top: 10 }) 
        }, (item:number) => item.toString()) 
        TextInput({ placeholder: 'search...', controller: this.controller }) 
          // 默认设置当前组件不能获焦 
          .focusable(this.flag) 
          .width('90%') 
          .height(40) 
          .backgroundColor('#FFFFFF') 
          .margin({ top: 8, bottom: 20 }) 
            // 设置点击事件重新获取焦点 
          .onClick(() => { 
            this.flag = true 
            this.TextTest1 = '1' 
          }) 
        // 给键盘空出的高度,内容不为空时会顶起页面的底部内容显示 
        Text(this.TextTest) 
          .lineHeight(300) 
          .fontColor('#DCDCDC') 
          Text(this.TextTest1) 
            .lineHeight(300) 
            .fontColor('#DCDCDC') 
      }.width('100%') 
    } 
    // 上间距根据导航栏高度来设置 
    .margin({top: 110}) 
    .scrollable(ScrollDirection.Vertical) 
    .scrollBar(BarState.On) 
    .scrollBarColor(Color.Gray) 
    .scrollBarWidth(0) 
    .onScroll((xOffset: number, yOffset: number) => { 
      console.info(xOffset + ' ' + yOffset) 
    }) 
    // Stack容器内的第二个子组件,Navigation会覆盖Scroll容器 
    Navigation() { 
    } 
    .title('导航栏标题') 
    .backgroundColor(Color.Yellow) 
    .height(110) 
    .titleMode(NavigationTitleMode.Full) 
    .hideTitleBar(false) 
    .hideToolBar(false) 
    // 这里的按钮是初步思想,由于没有找到监听键盘收起的事件,因此在键盘弹出时可以点击按钮,失去焦点的同时设置文本内容为空,但考虑到用户不会通过别的方式来收起键盘,因此这种方式就摒弃了,思路可供参考。 
    Button('键盘收起') 
      .onClick(() => { 
        this.TextTest1 = '' 
        this.flag = false 
      }) 
      .margin({top:10, left: 20}) 
  }.width('100%').height('100%').backgroundColor(0xDCDCDC) 
  // 设置屏幕的安全区域 
  .expandSafeArea([SafeAreaType.KEYBOARD]) 
} 
} 
 

适配的版本信息

IDE:DevEco Studio 4.0.1.601

SDK:HarmoneyOS 4.0.0.38

分享
微博
QQ
微信
回复
2024-05-27 11:56:36
相关问题
关于软键盘弹出遮挡问题
470浏览 • 1回复 待解决
如何判断软键盘是否弹出
884浏览 • 1回复 待解决
软键盘弹出,页面的自适应
514浏览 • 1回复 待解决
H5页面输入框自动获焦弹起软键盘
576浏览 • 1回复 待解决
鸿蒙软键盘弹出后,页面底部的按钮
3045浏览 • 0回复 待解决
如何控制软键盘弹出对页面的遮挡?
1589浏览 • 1回复 待解决
API8 怎么隐藏软键盘
1545浏览 • 1回复 待解决
如何实现弹窗和软键盘的避让
665浏览 • 1回复 待解决
如何主动拉起软键盘,你知道吗?
1086浏览 • 1回复 待解决
Web组件的onKeyEvent键盘事件生效
781浏览 • 1回复 待解决