HarmonyOS Development: How to solve the spacing after the soft keyboard pops up

introduction

Based on Api13

Recently, when I was checking the issues on github, I found a problem. It said that when there is a TextInput component in the custom pop-up window, after the touch focus pops up the soft keyboard, there is a gap between the component and the soft keyboard. After seeing the problem,"I was thinking, in the custom pop-up window, all UI is passed in. Is this gap added by the developer when drawing?", In the attitude of being responsible for the problem, he verified the cause of the problem, but finally found that it was*a problem with the Hongmeng system*.

In order to verify the problem, I passed in the custom UI, without a trace of space, after the pop-up, found that the developer's question is not false, and there is really a small space between the soft keyboard.

Looking at this spacing, I was stunned for 3 seconds and completely doubted my life. I obviously didn't set the spacing, but where did this spacing come from? Is there a gap in the soft keyboard itself after it is flipped up?

To verify the authenticity of the problem, I wrote a very simple code, just a Column component wrapped in a TextInput component, let TextInput component at the bottom, the code is as follows:

 Column() {
      TextInput()
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.End)
  }

Run, click the input box:

After running, looking at the space between the component and the soft keyboard, I fell into deep thought,"Give me the question that friend, this question, I do not carry the pot."

Is TextInput component has this problem, change another input component will not have this problem? So, I verified TextArea, RichEditor, and found that the problem still exists, obviously not related to components, but related to soft keyboards.

Open the Dom tree structure, you can find that the parent node Column has no spacing, but there is indeed a spacing from the soft keyboard.

After clicking on the root node, you will find that this spacing is brought by root.

This proves a problem, that is,the distance between the input box and the soft keyboard is the system's own, comparing the height before and after, we can conclude that this distance is 44px.

In fact, from my point of view, I think this spacing is very good, at least in the UI visual look beautiful. Of course, I can't think that I still have to take into account the actual needs of development, after all, some scenarios, there is no need for spacing.

There are problems, there will be solutions to the problem, after a series of research, in fact, the solution is also very simple, summed up there are three ways, we can choose the appropriate way.

Method 1: Set page avoidance mode

When we do not set the virtual keyboard avoidance mode, the default is OFFSET mode, that is, the lift mode, there will be spacing problems, we can change to compression mode RESIZE.

 this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)

After setting the avoidance mode, we run it again and see that the spacing between the component and the soft keyboard has been removed.

Method 2: Set Immersive Layout

When setting immersive layouts, the layout does not avoid the status bar and navigation bar. Components may overlap with them. In this case, you need to set your own distance from the top and bottom.

 window.getLastWindow(getContext(), (_, win) => {
      win.setWindowLayoutFullScreen(true)
    })

After setting, the effect is the same as the first method.

Although the spacing problem is solved, after immersion,since the status bar and navigation bar will not be avoided, the bottom component will be blocked, that is, as shown in the following figure:

In this case, if you want to achieve no spacing after the soft keyboard pops up, after the soft keyboard is retracted, the component is above the navigation bar at the bottom, then you need dynamic settings on the code, two ways, one is to monitor the input status of the input box, the other is to monitor the status of the soft keyboard pop-up, according to different states, and then set the distance from the bottom of the component.

Listen for input status of input box

The whole code is as follows. In the aboutToAppear method, set immersion to get the height of the navigation bar at the bottom. In the onEditChange method, listen for changes in the input state and dynamically assign it to the bottom distance attribute.

import { window } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State marginBottom: number = 0
  private bottomRectHeight: number = 0 //底部导航栏高度

  aboutToAppear(): void {
    window.getLastWindow(getContext(), (_, win) => {
      win.setWindowLayoutFullScreen(true)
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
      let avoidArea = win.getWindowAvoidArea(type)
      // 获取到导航条区域的高度
      this.bottomRectHeight = px2vp(avoidArea.bottomRect.height)
      this.marginBottom = this.bottomRectHeight //初始化默认距离底部距离
    })
  }

  build() {
    Column() {
      TextInput()
        .margin({ bottom: this.marginBottom })
        .onEditChange((isEditing: boolean) => {
          this.marginBottom = isEditing ? 0 : this.bottomRectHeight
        })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.End)
  }
}

After running, you can see that the default is above the navigation bar, and there is no spacing after the soft keyboard pops up.

Listen for soft keyboard pop-up status

It is nothing more than switching the input state of the input box to the pop-up state of the soft keyboard.

 // 监听软键盘的隐藏和显示
      win.on('keyboardHeightChange', (height) => {
        this.marginBottom = height > 0 ? 0 : this.bottomRectHeight
      })

According to normal logic, it should have the same effect as above, but the sword took a detour. When the soft keyboard popped up, the input box was obviously blocked.

I really admire this old six, nothing more than a change of monitoring mode, how to give a surprise, in view of this situation, it is recommended to use the first way directly, of course, if you still want to use this way, it is not impossible, soft keyboard pop up, need to add the height of the occlusion, that is, 44px.

 // 监听软键盘的隐藏和显示
      win.on('keyboardHeightChange', (height) => {
        this.marginBottom = height > 0 ? px2vp(44) : this.bottomRectHeight
      })

Mode 3: Dynamic setting position

The so-called dynamic setting is to dynamically set the position of the component according to the height of the soft keyboard, that is, the height of the soft keyboard needs to be obtained. When the soft keyboard pops up, the distance between the component and the bottom is exactly the height of the soft keyboard. This method is a bit similar to the immersive layout method, but it does not need to be set immersive.

One thing to note is that you need to configure the type of extended security area as SafeAreaType.KEYBOARD to prevent components from topping up with the soft keyboard.

import { window } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State marginBottom: number = 0

  aboutToAppear(): void {
    window.getLastWindow(getContext(), (_, win) => {
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
      let avoidArea = win.getWindowAvoidArea(type)
      // 获取到导航条区域的高度
      let bottomRectHeight = px2vp(avoidArea.bottomRect.height)
      // 监听软键盘的隐藏和显示
      win.on('keyboardHeightChange', (height) => {
        this.marginBottom = height > 0 ? px2vp(height) - bottomRectHeight : 0
      })
    })
  }

  build() {
    Column() {
      TextInput()
        .margin({ bottom: this.marginBottom })
    }
    .width("100%")
    .height("100%")
    .justifyContent(FlexAlign.End)
    .expandSafeArea([SafeAreaType.KEYBOARD])
  }
}

After running the above code, you can find that the effect is the same as above, of course, the position, not necessarily through the margin, you can also through the offset attribute, or padding attribute and so on.

offset({y:-this.marginBottom})

relevant summary

Still that sentence, self-feeling, Hongmeng system for this spacing processing, I think it is normal, after all, more in line with the visual beauty, if next to the display, but feel not very beautiful; But then again, the demand is changeable, no one is perfect, no gold is full of red, each product has its own ideas, and as research and development of us, if you do not have the courage to reverse modification, then just find a solution.

Three ways, the recommended way is simple and convenient, one line of code can be done, of course, the other two are also the way to achieve, in the actual development, choose the right one.