半模态框动态设置高度，当软键盘弹出时偶尔布局异常？

Question

用半模态实现弹框，根据键盘高度动态计算半模态框的高度，避免键盘弹出顶起半模态框导致内容显示不全。

偶尔键盘弹出后会出现左侧情况，半模态框内容跑到顶部，拉下来后，可正常滚动。是不是半模态框高度渲染“时差”导致的呢？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

避让区域的两个相关接口 getWindowAvoidArea 和 on('avoidAreaChange') 需要搭配组合使用。通常情况下，getWindowAvoidArea 用于应用启动时首次获取窗口避让区域，on('avoidAreaChange') 用于监听后续的避让区域变化，这套接口在应用的整个生命周期中只需要调用一次。如果存在需要解除注册避让区域监听或重新注册避让区域监听的时候，请将两个接口组合使用。

可以将System修改成Keyboard

// 将避让区域相关接口聚合成一个函数
function initAvoidArea(win: window.Window) {
  const avoidTop = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height;
  AppStorage.setOrCreate('avoidTop', avoidTop);

  const avoidBottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height;
  AppStorage.setOrCreate('avoidBottom', avoidBottom);

  win.on('avoidAreaChange', (data) => {
    if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
      AppStorage.setOrCreate('avoidTop', data.area.topRect.height);
    } else if (data.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
      AppStorage.setOrCreate('avoidBottom', data.area.bottomRect.height);
    }
  });
}