HarmonyOS鸿蒙Next中如何解决软键盘弹出后顶部控件无法固定的问题

【问题现象】

页面分为三个部分，顶部固定标题，中间是列表，底部是输入框。用户点击底部输入框时，页面弹出软键盘，顶部固定标题没有固定住，固定标题随着列表往上移动。

如下图所示，左侧图是没弹出软键盘的场景，右侧图是弹出软键盘的场景：

问题代码如下：

@Entry
@Component
struct Index {
  private list: string[] = []
  private scroller = new Scroller()

  aboutToAppear(): void {
    for (let i = 0; i < 200; i++) {
      this.list.push(`选项${i}`)
    }
  }

  build() {
    Column() {
      Text('我是固定标题')
        .fontColor(Color.White)
        .backgroundColor(Color.Red)

      List({ scroller: this.scroller, initialIndex: this.list.length - 1 }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item) .padding(10)
          }
        })
      }
      .layoutWeight(1)
      TextInput()
    }
    .height('100%')
    .width('100%')
  }
}

【背景知识】

• 在移动设备上，由于输入法通常固定在屏幕下半段，应用可设置软键盘避让模式。
• 可选：KeyboardAvoidMode配置键盘避让页面的避让模式，其中KeyboardAvoidMode.RESIZE表示压缩模式。

【定位思路】

用户触发软键盘弹出后，顶部导航栏不固定需要从组件使用的正确性和软键盘的正确使用方面进行检查。

1. 查看列表内容的滚动和文本输入框组件是否使用正确。
2. 查看键盘抬起后是否正确配置键盘避让模式。

【解决方案】

根据定位思路，进行如下操作：

1. 排查组件使用是否正确

首先需要排查组件是否使用正确。列表的实现需要使用List组件实现。列表的内容滚动需要使用scroller参数。文本输入框TextInput用于响应用户的输入操作。

2. 配置键盘避让模式

排查基础组件正确使用后，需要正确配置键盘避让模式，实现方法如下所示：

（1）在EntryAbility.ets的onWindowStageCreate方法中获取windowStage。

onWindowStageCreate(windowStage: window.WindowStage): void {
  AppStorage.setOrCreate("windowStage",windowStage);
}

（2）通过设置setKeyboardAvoidMode来配置虚拟键盘弹出时页面的避让模式。

import { KeyboardAvoidMode, window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private list: string[] = []
  private scroller = new Scroller()
  private windowStage = AppStorage.get("windowStage") as window.WindowStage

  aboutToAppear(): void {
    for (let i = 0; i < 200; i++) {
      this.list.push(`选项${i}`)
    }
    this.windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
  }

  build() {
    Column() {
      Text('我是固定标题')
        .fontColor(Color.White)
        .backgroundColor(Color.Red)

      List({ scroller: this.scroller, initialIndex: this.list.length - 1 }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .padding(10)
          }
        })
      }
      .layoutWeight(1)
      TextInput()
    }
    .height('100%')
    .width('100%')
  }
}

验证成功：

【总结】

在移动设备上，支持设置页面的软键盘避让模式。当顶部控件受弹出软键盘影响整体布局时，在应用代码中设置UIContext的软键盘避让模式setKeyboardAvoidMode()，当前ArkWeb组件支持Resize和Offset两种模式。