HarmonyOS鸿蒙Next中textarea在屏幕底部时输入内容，输入到第三行的内容会被软键盘遮挡，怎么实现输入内容不被软键盘遮挡且UI不变

【背景知识】

软键盘避让模式：当用户在输入时，为了确保输入框不会被键盘遮挡，系统提供了避让模式来解决这一问题。可以通过setKeyboardAvoidMode控制虚拟键盘抬起时页面的避让模式，键盘抬起时页面避让模式可分为上抬模式、压缩模式，默认采用上抬模式。

安全区域：安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。

【解决方案】

• 若想在多个输入框中切换时触发键盘避让（输入框光标位置发生变化时候也会触发）可以设置键盘避让模式为OFFSET_WITH_CARET或RESIZE_WITH_CARET，可以根据需要选择使用OFFSET或RESIZE模式。示例代码如下：

// src/main/ets/pages/MailPage.ets
import { KeyboardAvoidMode } from '@kit.ArkUI';
aboutToAppear(): void {
  // 根据需要选择合适的避让模式
  this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET_WITH_CARET)
  // this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE_WITH_CARET)
}

• 若重要信息被软键盘遮挡(如底部操作栏被遮挡)，可以设置软键盘的避让模式为KeyboardAvoidMode.RESIZE（压缩模式），压缩内容区域的高度，示例代码如下：

// src/main/ets/pages/MailPage.ets
aboutToAppear(): void {
  this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
}

aboutToDisappear(): void {
  this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.OFFSET);
}

• 若软键盘弹出导致布局错位（如顶部标题被软键盘向上抬），需要给对应的组件设置.expandSafeArea([SafeAreaType.KEYBOARD])属性，使标题组件不避让键盘，示例代码如下：

@Component
export struct ContactPage {
  // ...
  build() {
    Row() {
      Column() {
        Row() { // 顶部自定义标题栏
          // ...
        }
        .height('12%')
        .expandSafeArea([SafeAreaType.KEYBOARD]) // 控制组件扩展其安全区域
        .zIndex(1)
        // ...

        List() { // 聊天消息区域
          // ...
        }
        .height('76%')
        // ...

        Column(){ // 底部消息输入框
          // ...
        }
        .height('12%')
        // ...
      }
      .width('100%')
      // ...
    }
    .height('100%')
  }
}

• 若软键盘弹出导致弹窗过度上抬（如自定义弹窗被键盘顶起），可以使用Navigation.Dialog，通过设置NavDestination的mode为NavDestinationMode.DIALOG弹窗类型，此外还需要设置软键盘避让模式为压缩模式，可参考自定义弹窗被键盘顶起。示例代码如下：

@Component
export struct DialogPage {
@Consume('NavPathStack') pageStack: NavPathStack;

build() {
  NavDestination() {
    Stack({ alignContent: Alignment.Center }) {
      Column() {
        Text("Dialog NavDestination")
          .fontSize(20)
          .margin({ bottom: 100 })
        Button("Close").onClick(() => {
          this.pageStack.pop()
        }).width('30%')
      }
    }.height("100%").width('100%')
  }
  .mode(NavDestinationMode.DIALOG) // 设置NavDestination的mode为DIALOG
}

• 更多场景案例与示例代码，请参考：软键盘布局适配解决方案。