HarmonyOS 能否提供类似类似聊天app键盘切换到功能区的Demo？

Question

如题：HarmonyOS 能否提供类似类似聊天app键盘切换到功能区的Demo？

Answer 1

参考以下demo，看是否能够满足：

import { window } from '@kit.ArkUI';
import { inputMethod } from '@kit.IMEKit';

@Entry
@Component
struct CustomDialogUser {
  private list: string[] = ["你好", "你好", "你好", "你好", "你好", "你好", "你好", "你好"]
  @State keyboardHeight: number = 313; // 软键盘高度

  async aboutToAppear() {
    let currentWindow = await window.getLastWindow(getContext(this))
    currentWindow.on('keyboardHeightChange', (data: number) => {
      if (this.isShowArea && data === 0) {
        return
      }
      this.keyboardHeight = px2vp(data);
      console.log("1------------->" + this, this.keyboardHeight);
    })
  }

  controller = new TextInputController()
  @State isShowArea: boolean = false
  @State expandType: Array<SafeAreaType> = [SafeAreaType.SYSTEM]

  build() {
    Flex({ direction: FlexDirection.Column }) {
      Column() {
      }
      .flexGrow(1)
      .flexShrink(1)
      .flexBasis(1)
      //.backgroundColor("#3ef")
      .width("100%")

      Flex({ alignItems: ItemAlign.Center }) {
        TextInput({ controller: this.controller })
          .flexGrow(1)
          .flexShrink(1)
          .flexBasis(1)
          .onFocus(() => {
            if (this.isShowArea) {
              this.expandType = [SafeAreaType.KEYBOARD]
            } else {
              this.expandType = [SafeAreaType.SYSTEM]
            }
          })
        Button("+").onClick(() => {
          inputMethod.getController().stopInputSession().then(() => {
            this.isShowArea = true
          })
          this.isShowArea = true
          console.log("2")
        })
      }

      Column() {
        Grid() {
          ForEach(this.list, (item: string) => {
            GridItem() {
              Text(item)
            }
          })
        }
        .rowsTemplate('1fr 1fr')
        .columnsTemplate('1fr 1fr 1fr 1fr')
      }.visibility(this.isShowArea ? Visibility.Visible : Visibility.None).height(this.keyboardHeight)
    }.height("100%").width("100%").onClick(() => {
      inputMethod.getController().stopInputSession();
      this.isShowArea = false
    })
    .expandSafeArea(this.expandType)
  }
}