HarmonyOS鸿蒙Next中键盘弹出时顶部导航栏被顶出屏幕且输入框被遮挡导致布局异常

跑了个demo，看看：

import inputMethod from '@ohos.inputMethod';
import { KeyboardAvoidMode } from '@ohos.arkui.UIContext';
@Entry
@Component
struct AIDialogAssistant {
  @State safeArea: SafeAreaType[] = [SafeAreaType.SYSTEM]
  @State layerIndex: number = 2

  // 1. 固定参数
  private navBarHeight: number = 110; // 增加高度以适应两行
  private inputAreaHeight: number = 140; // 增加输入框区域高度

  // 2. 动态状态：键盘高度（控制输入框位置）
  @State keyboardHeight: number = 0;

  build() {
    // 根容器：Stack（实现分层固定，避免流式布局挤压）
    Stack({ alignContent: Alignment.TopStart }) {
      // ========== 层1：顶部导航栏 ==========
      Column() {
        // 第一行：标题和操作按钮
        Row() {
          Button('历史')
            .backgroundColor('#007DFF')
            .borderRadius(4)
            .fontSize(14)
            .padding({ left: 12, right: 12, top: 6, bottom: 6 })
            .fontColor('#FFFFFF');
          
          Text('AI对话助手')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .fontColor('#000000');
          
          Button('设置')
            .backgroundColor('#007DFF')
            .borderRadius(4)
            .fontSize(14)
            .padding({ left: 12, right: 12, top: 6, bottom: 6 })
            .fontColor('#FFFFFF');
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Center)
        .padding({ left: 16, right: 16, top: 8, bottom: 8 })

        Divider().color('#EEEEEE').strokeWidth(1)

        // 第二行：状态信息
        Row() {
          Text() {
            Span('当前角色: ')
            Span('默认助手')
            Span(' | ')
            Span('当前模型: ')
            Span('deepseek-ai/DeepSeek-R1')
          }
          .fontSize(12)
          .fontColor('#007DFF')
        }
        .width('100%')
        .padding({ left: 16, top: 4, bottom: 4 })
      }
      .expandSafeArea(this.safeArea)
      .zIndex(this.layerIndex)
      .width('100%')
      .height(this.navBarHeight)
      .position({ top: 0, left: 0 })
      .backgroundColor('#FFFFFF');

      // ========== 层2：中间内容区 ==========
      Scroll() {
        Column() {
          // 头像
          Image($r('app.media.foreground'))
            .width(160)
            .height(160)
            .borderRadius(80)
            .margin({ top: 40 });
          
          // 欢迎标题
          Text('欢迎使用AI对话助手')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 24 });
          
          // 欢迎描述
          Text('开始与AI助手对话吧！\n您可以提问任何问题，AI会尽力为您解答。')
            .fontSize(16)
            .fontColor('#666666')
            .textAlign(TextAlign.Center)
            .lineHeight(24)
            .margin({ top: 16, left: 40, right: 40 });
          
          // 角色说明
          Text('当前角色: 你是一个有用的AI助手，请用友好、专业的语气回答用户的问题。')
            .fontSize(14)
            .fontColor('#999999')
            .margin({ top: 24, left: 40, right: 40, bottom: 40 })
            .textAlign(TextAlign.Center);
        }
        .width('100%')
      }
      .width('100%')
      .height('100%')
      .margin({
        top: this.navBarHeight,
        bottom: this.inputAreaHeight
      })
      .backgroundColor('#F1F3F5');

      // ========== 层3：底部输入框 ==========
      Column() {
        Column() {
          // 输入框占位符/区域
          TextInput({ placeholder: '输入您的问题...' })
            .width('100%')
            .height(60)
            .placeholderColor('#999999')
            .backgroundColor(Color.Transparent)
            .fontSize(18);

          // 功能按钮行
          Row() {
            // 联网搜索按钮
            Row() {
              Text('🔍 联网搜索')
                .fontSize(14)
                .fontColor('#333333')
            }
            .backgroundColor(Color.White)
            .border({ width: 1, color: '#EEEEEE' })
            .borderRadius(20)
            .padding({ left: 12, right: 12, top: 6, bottom: 6 });

            Blank();

            // 功能按钮
            Row() {
              Button('+')
                .fontSize(20)
                .fontColor('#666666')
                .backgroundColor('#F1F3F5')
                .width(40)
                .height(40)
                .borderRadius(20)
                .margin({ right: 12 });
              
              Button('↑')
                .fontSize(20)
                .fontColor('#666666')
                .backgroundColor('#F1F3F5')
                .width(40)
                .height(40)
                .borderRadius(20);
            }
          }
          .width('100%')
          .padding({ bottom: 12 });
        }
        .width('92%')
        .backgroundColor(Color.White)
        .borderRadius(24)
        .padding({ left: 20, right: 20, top: 12, bottom: 12 })
        .shadow({ radius: 10, color: '#10000000', offsetX: 0, offsetY: 4 });
      }
      .width('100%')
      .padding({ bottom: 20 })
      .position({ bottom: 0 });
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5');
  }
  // ========== 监听键盘高度变化（核心逻辑） ==========
  aboutToAppear() {
    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
    // 监听键盘弹出/收起，更新键盘高度
    // 注意：inputMethod API可能不支持keyboardHeightChange事件
    // 暂时注释掉相关代码，避免编译错误
    // inputMethod.getController().on('keyboardHeightChange', (height: number) => {
    //   this.keyboardHeight = height;
    // });
  }

  // 页面销毁时移除监听，避免内存泄漏
  aboutToDisappear() {
    // inputMethod.getController().off('keyboardHeightChange');
  }
}