HarmonyOS鸿蒙Next中IM类应用适配PC快捷键最佳实践

一、切换发送消息快捷键场景适配

场景介绍

IM（Instant Messaging，即时通讯）类应用在发送消息时，通常需要使用Enter键或Ctrl+Enter键作为发送消息快捷键，在使用TextArea/RichEditor组件作为输入组件时，Enter按键事件会被输入组件消费导致无法正确在onKeyEvent事件中响应事件。针对此场景，可以在应用内维护Ctrl键按下状态，通过keyEvent事件刷新状态，并使用输入组件的onSubmit回调作为响应入口，正确响应消息发送事件。

功能介绍

1. 维护Ctrl按键状态并通过keyEvent事件刷新：

@State ctrlFlag: boolean = false; // 维护ctrl按键状态 

.onKeyEvent((event: KeyEvent) => { 
  if (event.getModifierKeyState) { 
    // 每次keyEvent更新ctrl按键状态 
    this.ctrlFlag = event.getModifierKeyState(['Ctrl']); 
  } 
})

1. 响应onSubmit事件发送消息：

.enterKeyType(this.enterTypes[this.switchIndex]) // 通过switchIndex切换当前组件的enterKeyType 
.onSubmit((enterKey: EnterKeyType, event: SubmitEvent) => { 
  console.info('onSubmit', enterKey); 
  // 通过enterKeyType和ctrl状态判断当前执行发送还是换行逻辑 
  if ((enterKey === EnterKeyType.Send && !this.ctrlFlag) || (enterKey === EnterKeyType.NEW_LINE && this.ctrlFlag)) { 
    this.submit() // 执行发送逻辑 
  } else if (enterKey === EnterKeyType.Send && this.ctrlFlag){ 
    this.controller.addTextSpan('\n'); // 执行换行逻辑 
  } 
  event.keepEditableState(); // 输入框保持输入态，保证输入连续性 
}) 

1. 使用Select组件切换消息发送快捷键：

@State enterTypes: Array<EnterKeyType> = [EnterKeyType.Send, EnterKeyType.NEW_LINE] 
@State switchText: string = 'Enter' 
@State switchIndex: number = 0; 
 
Select([{ value: 'Enter' }, { value: 'Ctrl + Enter' }]) 
  .selected(this.switchIndex) // 使用switchIndex作为当前选择模式的索引 
  .font({ size: 16, weight: 500 }) 
  .value(this.switchText) 
  .fontColor('#182431') 
  .selectedOptionFont({ size: 16, weight: 400 }) 
  .optionFont({ size: 16, weight: 400 }) 
  .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 }) 
  .optionWidth(200) 
  .optionHeight(300) 
  .onSelect((index: number, text?: string | undefined) => { 
    console.info('Select:' + index) 
    this.switchIndex = index; 
    this.switchText = text as string; 
  })

1. 使用Button组件作为发送消息的按钮：

Button('Submit').onClick(() => { 
  // submit为执行发送消息的逻辑处理  
  this.submit(); 
})

规范标准

按键事件数据流

按键事件由外设键盘等设备触发，经驱动和多模处理转换后发送给当前获焦的窗口，窗口获取到事件后，会尝试分发三次事件。三次分发的优先顺序如下，一旦事件被消费，则跳过后续分发流程。

1. 首先分发给ArkUI框架用于触发获焦组件绑定的onKeyPreIme回调和页面快捷键。
2. 再向输入法分发，输入法会消费按键用作输入。
3. 再次将事件发给ArkUI框架，用于响应系统默认Key事件（例如走焦），以及获焦组件绑定的onKeyEvent回调。

因此，当某输入框组件获焦，且打开了输入法，此时大部分按键事件均会被输入法消费。例如字母键会被输入法用来向输入框中输入对应字母字符、方向键会被输入法用来切换选中备选词。如果在此基础上给输入框组件绑定了快捷键，那么快捷键会优先响应事件，事件也不再会被输入法消费。

按键事件到ArkUI框架之后，会先找到完整的父子节点获焦链。从叶子节点到根节点，逐一发送按键事件。

效果示例