HarmonyOS鸿蒙Next中软键盘怎么自动避让TextInput的父组件

HarmonyOS鸿蒙Next中软键盘怎么自动避让TextInput的父组件 软键盘怎么自动避让TextInput的父组件

3 回复

参考demo：

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State text: string = ''
  @State changeType: InputType = InputType.Password
  @State changeState: boolean = false
  controller: TextInputController = new TextInputController()
  @State bottom: number = 0

  onPageShow(): void {
    window.getLastWindow(getContext(this)).then(window => {
      try {
        window.on('keyboardHeightChange', data => {
          if (data > 0) {
            this.bottom = 200
          } else {
            this.bottom = 0
          }
          console.info('Succeeded in enabling the listener for keyboard height changes. Data: ' + JSON.stringify(data));
        });
      } catch (exception) {
        console.error(`Failed to enable the listener for keyboard height changes. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    }).catch(err => {
      console.log('setWindowOrientation： Failed to obtain the top window. Cause: ' + JSON.stringify(err));
    });
  }

  build() {
    Column() {
      Row() {}
      .backgroundColor(Color.Brown)
      .width('100%')
      .height(100)

      Row() {}
      .backgroundColor(Color.Gray)
      .width('100%')
      .height('300px')

      Row() {}
      .backgroundColor(Color.Orange)
      .width('100%')
      .height('300px')

      Row() {}
      .backgroundColor(Color.Pink)
      .width('100%')
      .height('300px')

      Row() {
        TextInput({ text: this.text, controller: this.controller, placeholder: '请输入内容' })
          .type(this.changeType)
          .placeholderFont({ size: 16, weight: 400 })
          .showPasswordIcon(false)
          .width('100%')
          .onChange(value => {
            this.text = value
          })
      }
      .backgroundColor(Color.Brown)
      .height(300)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
    .offset({
      bottom: this.bottom
    })
  }
}

更多关于HarmonyOS鸿蒙Next中软键盘怎么自动避让TextInput的父组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，软键盘自动避让TextInput的父组件可以通过设置enableKeyboardAvoid属性来实现。该属性用于控制软键盘弹出时是否自动调整布局以避免遮挡输入框。默认情况下，enableKeyboardAvoid为true，系统会自动调整布局，使输入框不被软键盘遮挡。如果设置为false，则不会自动调整布局。

在开发过程中，可以通过在TextInput的父组件中添加enableKeyboardAvoid属性来控制这一行为。例如：

<StackLayout enableKeyboardAvoid="true">
    <TextInput placeholder="请输入内容" />
</StackLayout>

通过这种方式，当软键盘弹出时，系统会自动调整StackLayout的位置，确保TextInput不被遮挡。如果需要禁用这一行为，可以将enableKeyboardAvoid设置为false。

此外，还可以通过onKeyboardShow和onKeyboardHide事件监听软键盘的显示和隐藏，并根据需要手动调整布局。例如：

onKeyboardShow() {
    // 软键盘显示时的处理逻辑
}

onKeyboardHide() {
    // 软键盘隐藏时的处理逻辑
}

通过这些方法，可以灵活控制软键盘与输入框的交互行为，确保用户体验的流畅性。

在HarmonyOS鸿蒙Next中，软键盘自动避让TextInput的父组件可以通过以下步骤实现：

  1. 在布局文件中，确保TextInput的父组件设置为可自动调整大小，例如使用FlexLayout或StackLayout。

  2. 在代码中，使用windowSoftInputMode属性来设置窗口的软键盘模式。例如，设置windowSoftInputMode为adjustResize，这样当软键盘弹出时，窗口会自动调整大小，避免遮挡TextInput。

  3. 确保TextInput的父组件高度足够，以便在软键盘弹出时，TextInput仍然可见。

通过这些设置，软键盘会自动避让TextInput的父组件，确保用户输入体验的流畅性。

回到顶部