基于TextInput的自定义键盘

HarmonyOS官方账号

发布于 2024-9-26 09:22

浏览

0收藏

场景描述

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

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

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

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

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

方案描述

场景一：

自定义键盘
绑定自定义键盘

效果图

基于TextInput的自定义键盘-鸿蒙开发者社区

方案

基于@Builder下自定义键盘。
通过customKeyboard属性绑定自定义键盘。

核心代码

自定义键盘

//自定义数字键盘 
@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 ') 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

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

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

方案描述

场景二：

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

效果图

基于TextInput的自定义键盘-鸿蒙开发者社区

方案

通过变量来控制输入框在页面布局。自定义键盘拉起时，输入框自定义键盘上方，自定义键盘关闭时，输入框恢复原来位置。

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

点击收起自定义键盘收起键盘图标时，输入框组件未失焦，使用focusControl.requestFocus（）转移焦点来实现失焦，从而让输入框恢复原来布局。

核心代码

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

@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 })1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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

.onFocus(()=>{ 
  this.isShow = true 
}) 
  .onBlur(() =>{ 
    this.isShow = false 
  })1.
2.
3.
4.
5.
6.

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

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.
2.
3.
4.
5.
6.
7.
8.

方案描述

场景三：

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

效果图

基于TextInput的自定义键盘-鸿蒙开发者社区

方案

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

核心代码

基于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)) 
 
 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

点击不同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) 
  }) 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

分类

标签

已于2024-9-26 09:34:50修改

51CTO

51CTO博客

51CTO学堂

基于TextInput的自定义键盘

场景描述

方案描述

场景一：

效果图

方案

核心代码

方案描述

场景二：

效果图

方案

核心代码

方案描述

场景三：

效果图

方案

核心代码

目录

订阅鸿蒙技术特刊，精选内容抢先看