基于TextInput的自定义键盘

场景描述

在一些场景下我们系统键盘不能很好满足我们需求的时候，就可以通过自定义键盘来实现我们需求实现的键盘效果。

而自定义键盘可能会涉及一下场景：

场景一：进入页面点击输入框，弹出自定义键盘

场景二：自定义键盘弹出后页面输入框位置适配

场景三：切换自定义键盘模式-字母、数字

方案描述

场景一：

1、自定义键盘

2、绑定自定义键盘

效果图

方案

1、基于@Builder下自定义键盘

2、通过customKeyboard属性绑定自定义键盘

核心代码

1、自定义键盘

//自定义数字键盘
@Builder CustomKeyboardBuilder() {
  Grid() {
    ForEach([1, 2, 3,'删除', 4, 5, 6,'@', 7, 8, 9,'.', '*', 0, '返回','完成'], (item:number|string) => {
      GridItem() {
        Text(item + "")
          .backgroundColor('rgb(255, 255, 255)')
          .fontColor(Color.Black)
          .width(80)
          .height(50)
          .textAlign(TextAlign.Center)
          .borderRadius(4)
          .onClick(() => {
            if(item == '返回'){
              this.showType = false
            } else if (item == '完成'){
              this.controller.stopEditing()
            } else if (item == '删除'){
              this.inputValue = this.inputValue.slice(0,this.inputValue.length-2)
            } else {
              this.inputValue += item
            }
          })
      }
    })
  }
  .height(300)
  .columnsGap(5).rowsGap(10)
  .padding(5)
  .columnsTemplate('1fr 1fr 1fr 1fr')
  .rowsTemplate('1fr 1fr 1fr 1fr ')
}

2、基于customKeyboard属性绑定自定义键盘

TextInput({ placeholder: '请输入账号', controller: this.controller, text: this.inputValue })// 绑定自定义键盘
  .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })

方案描述

场景二：

1、基于页面布局做自定义键盘适配，自定义键盘拉起时，输入框被顶起，自定义键盘关闭时，输入框恢复原位。

效果图

方案

一、通过变量来控制输入框在页面布局。自定义键盘拉起时，输入框自定义键盘上方，自定义键盘关闭时，输入框恢复原来位置。二、通过焦点事件onFocus和onBlur事件控制输入框布局变化。三、点击收起自定义键盘收起键盘图标时，输入框组件未失焦，使用focusControl.requestFocus（）转移焦点来实现失焦，从而让输入框恢复原来布局。

核心代码

1、通过变量来控制输入框在页面布局。

@State isShow: boolean = false
Column(){
  Image($r('app.media.img'))
    .margin({
      top: this.isShow?50:150,
      bottom: 50,
    })
  ...
  TextInput({ placeholder: '请输入密码', text: this.inputValue })
    .border({width: 1})
    .margin({
      top: this.isShow?10:150,
      bottom: 10
    })
    .width('100%')
  TextInput({ placeholder: '请输入账号', controller: this.controller, text: this.inputValue })

2、通过焦点事件onFocus和onBlur事件控制输入框布局变化。

.onFocus(()=>{
  this.isShow = true
})
  .onBlur(() =>{
    this.isShow = false
  })

3、点击收起键盘图标收起自定义键盘时失焦处理。

Image($r('app.media.cs_icon_key_down_close'))
  .width(30)
  .id('222')
  .height(30).onClick(()=>{
  this.presenterKeyboard.closeKeyboard(this.controller)
  this.isShow = false
  focusControl.requestFocus(keyboardConfig.image)
})

方案描述

场景三：

1、自定义与自定义键盘切换，系统键盘与自定义键盘之间切换

效果图

方案

一、基于stack容器组件来承载自定义键盘。通过点击不同的按键事件，在不同键盘之间切换。二、在两个自定义键盘中的切换键盘的按键增设点击事件，通过点击事件切换customKeyboard绑定的变量，从而实现键盘切换。

核心代码

1、基于stack容器组件来承载自定义键盘。

Stack() {
  //123 数字键盘
  CSKeyboardNumberView({
    inputValue: $inputValue,
    currentKeyboard: $currentKeyboard,
    controller: this.controller,
    presenterKeyboard: this.presenterKeyboard

  })
    .visibility(this.presenterKeyboard.isVisibility123(this.currentKeyboard))

  //大写字母键盘
  CSKeyboardUppercaseView({
    inputValue: $inputValue,
    currentKeyboard: $currentKeyboard,
    controller: this.controller,
    presenterKeyboard: this.presenterKeyboard

  })
    .visibility(this.presenterKeyboard.isVisibilityUppercase(this.currentKeyboard))


  //小写字母键盘
  CSKeyboardLowercaseView({
    inputValue: $inputValue,
    currentKeyboard: $currentKeyboard,
    controller: this.controller,
    presenterKeyboard: this.presenterKeyboard

  })
    .visibility(this.presenterKeyboard.isVisibilityLowercase(this.currentKeyboard))


}

2、点击不同tab触发事件切换customKeyboard绑定的变量，从而实现键盘切换。

Row() {
  Text(keyboardConfig.key123Code)
    .onClick(() => {
      this.currentKeyboard = CSKeyBoardType.NUMBER
    }).fontColor(this.presenterKeyboard.selectTabColor(this.currentKeyboard, keyboardConfig.key123Code))
  Text(keyboardConfig.keyABCCode)
    .onClick(() => {
      this.currentKeyboard = CSKeyBoardType.UPPERCASE;
    }).fontColor(this.presenterKeyboard.selectTabColor(this.currentKeyboard, keyboardConfig.keyABCCode))
  Text(keyboardConfig.keySystemCode)
    .onClick(() => {
      this.controller.stopEditing()
      this.currentKeyboard = CSKeyBoardType.SYSTEM;
      focusControl.requestFocus(keyboardConfig.inputKey)
      setTimeout(() => {
        sendEventByKey(keyboardConfig.inputId, 10, '')
        console.log('delay 1s');
      }, 100);

    }).fontColor(this.presenterKeyboard.selectTabColor(this.currentKeyboard, keyboardConfig.keySystemCode))
  Image($r('app.media.cs_icon_key_down_close'))
    .width(30)
    .id('222')
    .height(30).onClick(()=>{
    this.presenterKeyboard.closeKeyboard(this.controller)
    this.isShow = false
    focusControl.requestFocus(keyboardConfig.image)
  })
}