ArkUI的TextInput组件的customKeyboard使用案例？如何在customKeyboard中使用系统的安全键盘？

Question

如题：ArkUI的TextInput组件的customKeyboard使用案例？如何在customKeyboard中使用系统的安全键盘？

Answer 1

1、主要使用半模态转场、焦点切换、输入控制三类能力

2、在实现的过程中注意切换各个控件的显示即可

3、当前实现方式主要以状态变量控制，可以适当优化代码逻辑，降低复杂度

以下是代码实现：

（1）注册窗口对键盘高度的监听

import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    let window = windowStage.getMainWindowSync()
    let storage: LocalStorage = new LocalStorage({
      'window': window
    });
    windowStage.loadContent('pages/demo/car_home', storage, (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

（2）页面的简化实现

import window from '@ohos.window'
import request from '@ohos.request'

let storage = LocalStorage.getShared()

@Entry(storage)
@Component
struct SheetTransitionExample {
  @State text: string = ""
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 470;
  @State showDragBar:boolean = true;
  @State isShow3:boolean = false
  @State change: boolean = true
  controller: TextAreaController = new TextAreaController()
  window: window.Window = storage.get('window')

  aboutToAppear(): void {
    this.window.on('keyboardHeightChange', (keyboardHeight) => {
      if (keyboardHeight == 0 && !this.isShow3) {
        this.isShow = false
      }
    })
  }

  @Builder myBuilder() {
    Column() {
      Row() {
        TextArea({text: this.text,  placeholder: "发条有爱的评论~", controller: this.controller})
          .width('80%')
          .defaultFocus(true)
          .key("input")
          .onChange((value) => {
            this.text = value
          })
          .onFocus(() => {
            this.change = true
          })
      }
      .height(50)
      .justifyContent(FlexAlign.Start)
      Row() {
        Column() {
          if (this.change) {
            Button("表情")
              .width('90%')
              .onClick(() => {
                this.isShow3 = true
                this.change = false
                focusControl.requestFocus('emoji')
              })
          } else {
            Button("键盘")
              .width('90%')
              .onClick(() => {
                this.isShow3 = false
                this.change = true
                focusControl.requestFocus('input')
              })
          }
        }.width('25%')
        Column() {
          Button("b")
            .width('90%')
        }.width('25%')
        Column() {
          Button("c")
            .width('90%')
        }.width('25%')
        Column() {
          Button("d")
            .width('90%')
        }.width('25%')
        Column() {
          Button("e")
            .width('90%')
        }.width('25%')
      }
      .height(50)
      .justifyContent(FlexAlign.Start)
      .key('emoji')

      if (this.isShow3) {
        Row() {
          Column() {
            Text("a")
              .width('90%')
              .border({
                width: 2,
                color: Color.Blue
              })
              .onClick(() => {
                this.text = this.text + "a"
              })
          }.width('20%')
          Column() {
            Text("b")
              .width('90%')
              .border({
                width: 2,
                color: Color.Blue
              })
              .onClick(() => {
                this.text = this.text + "b"
              })
          }.width('20%')
          Column() {
            Text("c")
              .width('90%')
              .border({
                width: 2,
                color: Color.Blue
              })
              .onClick(() => {
                this.text = this.text + "c"
              })
          }.width('20%')
          Column() {
            Text("d")
              .width('90%')
              .border({
                width: 2,
                color: Color.Blue
              })
              .onClick(() => {
                this.text = this.text + "d"
              })
          }.width('20%')
          Column() {
            Text("e")
              .width('90%')
              .border({
                width: 2,
                color: Color.Blue
              })
              .onClick(() => {
                this.text = this.text + "e"
              })
          }.width('20%')
        }
        .height(350)
        .width('100%')
      }
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Button("点开评论")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(),
          {
            height: this.sheetHeight,
            dragBar: this.showDragBar,
            showClose: false,
            onAppear: () => {
              console.log("BindSheet onAppear.")
            }, onDisappear: () => {
            console.log("BindSheet onDisappear.")
            this.change = true
          }
          }
        )
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}