鸿蒙UI开发——键盘弹出避让模式设置

1、概 述

我们在鸿蒙开发时，不免会遇到用户输入场景，当用户准备输入时，会涉及到输入法的弹出，我们的界面针对输入法的弹出有两种避让模式：上抬模式、压缩模式。

下面针对输入法的两种避让模式的设置做简单介绍。

2、设置避让模式

设置虚拟键盘抬起时页面的避让模式，API介绍如下：

setKeyboardAvoidMode(value: KeyboardAvoidMode): void

获取虚拟键盘抬起时的页面避让模式，API介绍如下：

getKeyboardAvoidMode(): KeyboardAvoidMode

其中，KeyboardAvoidMode是一个枚举，默认值为OFFSET上抬模式，定义如下：

OFFSET, // 上抬模式。RESIZE, // 压缩模式。

KeyboardAvoidMode.RESIZE是压缩Page的大小，Page下设置百分比宽高的组件会跟随Page压缩，直接设置宽高的组件会按设置的固定大小布局。

👉🏻 设置为压缩模式

设置虚拟键盘抬起时压缩页面大小为减去键盘的高度。

下面的示例通过调用setKeyboardAvoidMode设置键盘避让模式为RESIZE模式，实现键盘抬起时page的压缩效果。

我们先在EntryAbility中设置避让模式（我们也可以在Page中获取到UIContext动态设置），示例代码如下（第10行）：​​​​​​​

// EntryAbility.etsimport { KeyboardAvoidMode } from '@kit.ArkUI';onWindowStageCreate(windowStage: window.WindowStage) {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  windowStage.loadContent('pages/Index', (err, data) => {    windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);    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. Data: %{public}s', JSON.stringify(data) ?? '');  });}

然后写一个简单的界面，代码如下：​​​​​​​

// xxx.ets@Entry@Componentstruct KeyboardAvoidExample1 {  build() {    Column() {      Row().height("30%").width("100%").backgroundColor(Color.Gray)      TextArea().width("100%").borderWidth(1)      Text("I can see the bottom of the page").width("100%").textAlign(TextAlign.Center).backgroundColor(Color.Pink).layoutWeight(1)    }.width('100%').height("100%")  }}

默认情况下（键盘未弹出），效果如下：

键盘弹出后，效果如下（底部的粉色区域被压缩）：

👉🏻 设置为上抬模式

下面的示例通过调用setKeyboardAvoidMode设置键盘避让模式为OFFSET模式，实现键盘抬起时page的上抬效果。

当输入光标距离屏幕底部的高度大于键盘高度时，page不会抬起

我们先在EntryAbility中设置避让模式（我们也可以在Page中获取到UIContext动态设置），示例代码如下（第10行）：​​​​​​​

// EntryAbility.etsimport { KeyboardAvoidMode } from '@kit.ArkUI';onWindowStageCreate(windowStage: window.WindowStage) {  // Main window is created, set main page for this ability  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');  windowStage.loadContent('pages/Index', (err, data) => {   windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);    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. Data: %{public}s', JSON.stringify(data) ?? '');  });}

然后写一个简单的界面（与Resize的一样），代码如下：​​​​​​​

// xxx.ets@Entry@Componentstruct KeyboardAvoidExample2 {  build() {    Column() {      Row().height("30%").width("100%").backgroundColor(Color.Gray)      TextArea().width("100%").borderWidth(1)      Text("I can see the bottom of the page").width("100%").textAlign(TextAlign.Center).backgroundColor(Color.Pink).layoutWeight(1)    }.width('100%').height("100%")  }}

默认情况下（键盘未弹出），效果如下：

键盘弹出后，效果如下（底部粉色区域的文字被键盘遮挡，同时，由于底部粉色区域高于键盘，所以界面不会因为键盘弹出而发生布局变化）：