HarmonyOS 键盘避让该怎样进行设置？

Question

我的TextInput或者RichEditor组件下面还有其他的视图，我希望用户点击弹出键盘后输入框下面的视图页显示在键盘之上，请问该怎么进行处理，代码如下

build() {
  Column() {
    Blank().layoutWeight(1)
    TextInput()
    Text("键盘展开后，希望这个Text的视图也在键盘之上怎么办？").height(150)
  }
  .height('100%')
  .width('100%')
}

Answer 1

参考示例：

//EntryAbility.ets
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });

    windowStage.getMainWindow((err, data) => {
      if (err.code) {
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
        return;
      }
      let windowClass = data;
      //1. 设置监听键盘变化,用来设置inputview 避让输入法
      try {
        windowClass.on('keyboardHeightChange', (data) => {
          console.info('keyboardHeightChange. Data: ' + JSON.stringify(data));
          AppStorage.setOrCreate('keyboardHeight', data);
          console.info(AppStorage.get('keyboardHeight'))
        });
      } catch (exception) {
        console.error('Failed to enable the listener for keyboard height changes. Cause: ' + JSON.stringify(exception));
      }
    })
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

//Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  private controller: RichEditorController = new RichEditorController();
  @StorageLink('keyboardHeight') keyboardHeight: number = 0;

  build() {
    Column() {
      Blank().layoutWeight(1)
      Row() {
        RichEditor({ controller: this.controller })// 绑定自定义键盘
          .customKeyboard(null)
          .backgroundColor("#F5F6F8")
          .width("100%").onIMEInputComplete((value) => {
        })
      }.margin({ top: 13, bottom: 0 })
      Text("键盘展开后，希望这个Text的视图也在键盘之上怎么办？").height(150)
      // .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP])
    }
    .height('100%')
    .width('100%')
    .padding({bottom:px2vp(this.keyboardHeight)}) //配合expandSafeArea, 实现避让键盘
    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
  }
}