鸿蒙HarmonyOS（开发进阶）在自绘编辑框中利用输入法

 鸿蒙NEXT开发实战往期必看文章：
一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！
“非常具体的” 鸿蒙HarmonyOS Next应用开发学习门路！（从零底子入门到精通）
HarmonyOS NEXT应用开发案例实践总结合（连续更新......）
HarmonyOS NEXT应用开发性能优化实践总结（连续更新......）

---

在输入法框架中，可以通过getController方法获取到InputMethodController实例来绑定输入法并监听输入法应用的各种操作，比如插入、删除、选择、光标移动等。这样就可以在自绘编辑框中利用输入法，并实现更加机动和自由的编辑操作。
开发步骤

• 开发者在自绘编辑框利用输入法时，首先需要在DevEco Studio工程中新建一个ets文件，命名为自定义控件的名称，本示例中命名为CustomInput，在文件中定义一个自定义控件，并从@kit.IMEKit中导入inputMethod。
  
  1. import { inputMethod } from '@kit.IMEKit';
  3. @Component
  4. export struct CustomInput {
  5.   build() {
  6.   }
  7. }

  复制代码
• 在控件中，利用Text组件作为自绘编辑框的文本体现组件，利用状态变量inputText作为Text组件要体现的内容。
  
  1. import { inputMethod } from '@kit.IMEKit';
  3. @Component
  4. export struct CustomInput {
  5.   @State inputText: string = ''; // inputText作为Text组件要显示的内容。
  6.   
  7.   build() {
  8.     Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
  9.       .fontSize(16)
  10.       .width('100%')
  11.       .lineHeight(40)
  12.       .id('customInput')
  13.       .height(45)
  14.       .border({ color: '#554455', radius: 30, width: 1 })
  15.       .maxLines(1)
  16.   }
  17. }

  复制代码
• 在控件中获取inputMethodController实例，并在文本点击时调用controller示例的attach方法绑定和拉起软键盘，并注册监听输入法插入文本、删除等方法，本示例仅展示插入、删除。
  
  1. import { inputMethod } from '@kit.IMEKit';
  3. @Component
  4. export struct CustomInput {
  5.   @State inputText: string = ''; // inputText作为Text组件要显示的内容。
  6.   private isAttach: boolean = false;
  7.   private inputController: inputMethod.InputMethodController = inputMethod.getController();
  9.   build() {
  10.     Text(this.inputText) // Text组件作为自绘编辑框的文本显示组件。
  11.       .fontSize(16)
  12.       .width('100%')
  13.       .lineHeight(40)
  14.       .id('customInput')
  15.       .onBlur(() => {
  16.         this.off();
  17.       })
  18.       .height(45)
  19.       .border({ color: '#554455', radius: 30, width: 1 })
  20.       .maxLines(1)
  21.       .onClick(() => {
  22.         this.attachAndListener(); // 点击控件
  23.       })
  24.   }
  26.   async attachAndListener() { // 绑定和设置监听
  27.     focusControl.requestFocus('CustomInput');
  28.     await this.inputController.attach(true, {
  29.       inputAttribute: {
  30.         textInputType: inputMethod.TextInputType.TEXT,
  31.         enterKeyType: inputMethod.EnterKeyType.SEARCH
  32.       }
  33.     });
  34.     if (!this.isAttach) {
  35.       this.inputController.on('insertText', (text) => {
  36.         this.inputText += text;
  37.       })
  38.       this.inputController.on('deleteLeft', (length) => {
  39.         this.inputText = this.inputText.substring(0, this.inputText.length - length);
  40.       })
  41.       this.isAttach = true;
  42.     }
  43.   }
  45.   off() {
  46.     this.isAttach = false;
  47.     this.inputController.off('insertText')
  48.     this.inputController.off('deleteLeft')
  49.   }
  50. }

  复制代码
• 在应用界面布局中引入该控件即可，此处假设利用界面为Index.ets和控件CustomInput.ets在同一目次下。
  
  1. import { CustomInput } from './CustomInput'; // 导入控件
  3. @Entry
  4. @Component
  5. struct Index {
  7.   build() {
  8.     Column() {
  9.       CustomInput() // 使用控件
  10.     }
  11.   }
  12. }

  复制代码
  示例效果图
  

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。