鸿蒙开发：16-软键盘弹起顶起页面问题

软键盘弹起顶起页面问题

Stack布局中，当Stack宽高均设置为100%时，软键盘弹起会顶起页面（KeyboardAvoidMode值为OFFSET）

如何定位键盘弹出后原UI布局错乱问题-ArkUI开发框架-开发-常见问题手册 - 华为HarmonyOS开发者

软键盘布局适配解决方案-输入法框架-应用框架 - 华为HarmonyOS开发者

1、组件设置expandSafeArea属性

如何实现弹窗和软键盘的避让-方舟UI框架（ArkUI）-UI框架-应用框架开发-开发 - 华为HarmonyOS开发者

键盘避让时固定背景图位置

组件设置expandSafeArea属性可以控制组件扩展其安全区域，实现键盘避让，键盘拉起时布局不发生改变。属性详细说明可参考以下链接。

css 复制代码

.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

Typescript 复制代码

@Entry 
@Component 
struct AvoidDialogPage { 
  @State message: string = '打开弹窗'; 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample() 
  }) 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(() => { 
            this.dialogController.open(); 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
} 
 
@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({}) 
  }) 
 
  build() { 
    Column() { 
      TextInput({}) 
        .fontSize(20) 
        .margin({ top: 10, bottom: 10 }) 
        .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) 
        .borderWidth(0.5) 
        .borderRadius(4) 
        .height(40) 
        .defaultFocus(true) 
        .margin({ top: 30, left: 16, right: 16 }) 
    } 
  } 
}

2、设置键盘的KeyboardAvoidMode值为RESIZE

KeyboardAvoidMode.RESIZE模式下，expandSafeArea设置将不起作用。

安全区域-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

1、可以使用三方库@pura/harmony-utils下的AppUtil.setKeyboardAvoidMode()方法

2、使用系统原生方法：

Typescript 复制代码

// EntryAbility.ets
import { 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) => {
    let keyboardAvoidMode = windowStage.getMainWindowSync().getUIContext().getKeyboardAvoidMode();
    // 设置虚拟键盘抬起时压缩页面大小为减去键盘的高度
  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) ?? '');
  });
}