希望有一个避免键盘遮挡输入框和聊天内容的Demo？

Question

页面结构如下，希望键盘能在消息item满屏、不满屏场景下都能适配键盘的弹出和收起。

• Page—导航栏—DXRecycleLayout（WaterFall）--------消息item1--------消息item2--------消息item…—输入框

咨询场景描述：目前我们通过this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);将页面设置为resize模式，但发现几个问题：1、当我们给TextInput设置margin(10)时，键盘会遮挡住部分输入框

2、调用this.textInputController.stopEditing();后，onBlur函数不会被执行，点击键盘自带的收起按钮会调用

3、假设当前WaterFall已经滚动到底部，键盘弹起后WaterFall无法保留已经在底部的状态，看现象好像是保留在了上一次的offset

（但因为高度变化，此offset已经不是底部了）

Answer 1

import { KeyboardAvoidMode } from '@kit.ArkUI';
// 开启沉浸式下
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  controller: TextInputController = new TextInputController();

  aboutToAppear(): void {
    // 设置为RESIZE模式
    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
  }

  build() {
    Stack(){
      Column() {
        // 模拟statusBar
        Row() {
          Stack().height("100%").width("100%").backgroundColor(Color.Red)
        }
        .height("126px")
        .width("100%")
        .backgroundColor(Color.Brown)
        // 模拟导航栏
        Row() {
          Text(this.message)
        }
        .height("100")
        .width("100%")
        .backgroundColor(Color.Brown)
        // 模拟RecycleLayout
        WaterFlow() {
          FlowItem() {
            Text('1')
              .fontSize(24)
              .height("100")
              .width("100%")
          }

          FlowItem() {
            Text('2')
              .fontSize(24)
              .height("100")
              .width("100%")
          }

          FlowItem() {
            Text('3')
              .fontSize(24)
              .height("100")
              .width("100%")
          }

          FlowItem() {
            Text('4')
              .fontSize(24)
              .height("100")
              .width("100%")
          }
          FlowItem() {
            Text('5')
              .fontSize(24)
              .height("100")
              .width("100%")
          }

          FlowItem() {
            Text('最后一个item')
              .fontSize(24)
              .height("100")
              .width("100%")
          }
        }
        .height('60%')
        .width('100%')
        .backgroundColor('#F183F5')
      }
      .width('100%')
      .height('100%')
      .onTouch(() => {
        this.controller.stopEditing(); // ！！！不会触发onBlur
      })
      TextInput({ controller: this.controller })
        .onFocus(() => {
          console.log("---------onFocus");
        })
        .onBlur(() => {
          console.log("---------onBlur");
        }).margin({bottom:5})
    }.alignContent(Alignment.Bottom)
  }
}