鸿蒙API13开发【组件快捷键事件】ArkTS组件

开发者可以设置组件的自定义组合键，每个组件可以设置多个组合键。
即使组件未获焦或是在所在页面未展示，只要已经挂载到获焦窗口的组件树上就会相应自定义组合键。
开发者在设置组合键的同时可以设置自定义事件，组合键按下时，触发该自定义事件，若没有设置自定义事件，则组合键行为与click行为同等。
阐明
从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标志该内容的起始版本。
keyboardShortcut

keyboardShortcut(value: string | FunctionKey, keys: Array, action?: () => void): T
设置组件的自定义组合键。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名参数范例必填参数形貌valuestring[FunctionKey]是keysArray<[ModifierKey]>是热键组合。仅当value为[FunctionKey]的情况下可以为空。action() => void否组合快捷键触发成功后的自定义事件回调。 返回值：
范例阐明T返回当前组件。 ModifierKey

元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
名称形貌CTRL表示键盘上Ctrl键。SHIFT表示键盘上Shift键。ALT表示键盘上Alt键。 FunctionKey

系统本领： SystemCapability.ArkUI.ArkUI.Full
名称形貌ESC表示键盘上ESC功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F1表示键盘上F1功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F2表示键盘上F2功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F3表示键盘上F3功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F4表示键盘上F4功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F5表示键盘上F5功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F6表示键盘上F6功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F7表示键盘上F7功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F8表示键盘上F8功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F9表示键盘上F9功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F10表示键盘上F10功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F11表示键盘上F11功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。F12表示键盘上F12功能键。元服务API： 从API version 11开始，该接口支持在元服务中使用。TAB12+表示键盘上TAB功能键。元服务API： 从API version 12开始，该接口支持在元服务中使用。DPAD_UP12+表示键盘上UP方向键。元服务API： 从API version 12开始，该接口支持在元服务中使用。DPAD_DOWN12+表示键盘上DOWN方向键。元服务API： 从API version 12开始，该接口支持在元服务中使用。DPAD_LEFT12+表示键盘上LEFT方向键。元服务API： 从API version 12开始，该接口支持在元服务中使用。DPAD_RIGHT12+表示键盘上RIGHT方向键。元服务API： 从API version 12开始，该接口支持在元服务中使用。 快捷键使用注意事项

快捷键是对系统按键的相应，优先于普通的按键事件OnKeyEvent，按键事件触发的逻辑详见[按键事件数据流]
场景快捷键处理逻辑例子所有支持onClick事件的组件支持自定义组合键无自定义组合键要求控制键Ctrl、Shift、Alt及它们的组合加上别的可输入字符按键Button(‘button1’).keyboardShortcut(‘a’,[ModifierKey.CTRL])多个不同组件设置类似组合键只相应结点树上的第一个组件，别的组件不相应快捷键。Button(‘button1’).keyboardShortcut(‘a’,[ModifierKey.CTRL])Button(‘button2’).keyboardShortcut(‘a’,[ModifierKey.CTRL])无论组件是否获得核心只要窗口获焦快捷键就会相应无使用单个FunctionKey触发快捷键单个FunctionKey，没有ModifierKey，可以绑定为快捷键Button(‘button1’).keyboardShortcut(FunctionKey.F2,[])keyboardShortcut的入参value为空取消绑定的快捷键。绑定多个快捷键的时间无法取消快捷键。Button(‘button1’).keyboardShortcut(‘’,[ModifierKey.CTRL])Button(‘button2’).keyboardShortcut(‘’,[])独立pipeline子窗口、主窗口共存的情况下获焦的窗口相应快捷键无keyboardShortcut接口中的keys命令中ctrl、shift、alt不区分左右键都相应Button(‘button1’).keyboardShortcut(‘a’,[ModifierKey.CTRL, ModifierKey.ALT])keyboardShortcut接口中的value单个字符不区分大小写都相应Button(‘button1’).keyboardShortcut(‘a’,[ModifierKey.CTRL])Button(‘button2’).keyboardShortcut(‘A’,[ModifierKey.CTRL])快捷键的相应keys键处于按下状态且value键触发down事件（长按会连续相应）无隐藏组件相应快捷键无disable状态组件不相应快捷键无1. 组件的组合键(包括系统预定义快捷键)类似时。2. 接口参数value有多个字符时。3. 接口参数keys有重复的控制键时。这几种情况不绑定组合键, 先前绑定的组合键仍然有效Button(‘button1’).keyboardShortcut(FunctionKey.F4,[ModifierKey.ALT])Button(‘button2’).keyboardShortcut(‘ab’,[ModifierKey.CTRL])Button(‘button3’).keyboardShortcut(‘ab’,[ModifierKey.CTRL,ModifierKey.CTRL]) 克制绑定的系统快捷键

以下组合键绑定为快捷键不生效。

• Ctrl + C
  
• Ctrl + A
  
• Ctrl + V
  
• Ctrl + X
  
• Ctrl + Shift + Z
  
• Ctrl + Z
  
• Ctrl + Y
  

系统已存在的按键事件

已存在如下系统相应的按键事件，详细规格如下表。
表中的按键事件与自定义按键事件的触发有优先级关系，高优先级的事件会拦截低优先级事件，核心事件相应优先级详见[按键事件数据流]
快捷键获焦组件用途事件处理种别方向键、Shift + 方向键输入框组件移动光标输入法方向键、Shift + 方向键通用组件系统处于走焦状态时，用于方向走焦系统按键TAB、Shift + TAB通用组件触发进入走焦状态/走焦系统按键 示例

示例1（设置组件快捷键）

该示例通过设置组件的快捷键，同时按控制键+对应的字符可以触发组件相应快捷键，并触发onClick事件或自定义事件。

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World'
6.   build() {
7.     Row() {
8.       Column({ space: 5 }) {
9.         Text(this.message)
10.         Button("Test short cut 1").onClick((event: ClickEvent) => {
11.           this.message = "I clicked Button 1";
12.           console.log("I clicked 1");
13.         }).keyboardShortcut('.', [ModifierKey.SHIFT, ModifierKey.CTRL, ModifierKey.ALT])
14.           .onKeyEvent((event: KeyEvent)=>{
15.             console.log("event.keyCode: " + JSON.stringify(event));
16.           })
17.         Button("Test short cut 2").onClick((event: ClickEvent) => {
18.           this.message = "I clicked Button 2";
19.           console.log("I clicked 2");
20.         }).keyboardShortcut('1', [ModifierKey.CTRL])
21.         Button("Test short cut 3").onClick((event: ClickEvent) => {
22.           this.message = "I clicked Button 3";
23.           console.log("I clicked 3");
24.         }).keyboardShortcut('A', [ModifierKey.SHIFT])
25.         Button("Test short cut 4").onClick((event: ClickEvent) => {
26.           this.message = "I clicked Button 4";
27.           console.log("I clicked 4");
28.         }).keyboardShortcut(FunctionKey.F5, [], () => {
29.           this.message = "I clicked Button 4";
30.           console.log("I clicked user callback.");
31.         }).keyboardShortcut(FunctionKey.F3, [])
32.       }
33.       .width('100%')
34.     }
35.     .height('100%')
36.   }
37. }

复制代码

示例2（注册和解注册快捷键绑定）

该示例演示了如何实现按键注册和解注册快捷键绑定。

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'disable'
5.   @State shortCutEnable: boolean = false
6.   @State keyValue: string = ''
8.   build() {
9.     Row() {
10.       Column({ space: 5 }) {
11.         Text('Ctrl+A is ' + this.message)
12.         Button("Test short cut").onClick((event: ClickEvent) => {
13.           this.message = "I clicked Button";
14.           console.log("I clicked");
15.         }).keyboardShortcut(this.keyValue, [ModifierKey.CTRL])
16.         Button(this.message + 'shortCut').onClick((event: ClickEvent) => {
17.           this.shortCutEnable = !this.shortCutEnable;
18.           this.message = this.shortCutEnable ? 'enable' : 'disable';
19.           this.keyValue = this.shortCutEnable ? 'a' : '';
20.         })
21.         Button('multi-shortcut').onClick((event: ClickEvent) => {
22.           console.log('Trigger keyboard shortcut success.')
23.         }).keyboardShortcut('q', [ModifierKey.CTRL])
24.           .keyboardShortcut('w', [ModifierKey.CTRL])
25.           .keyboardShortcut('', []) // 不生效，绑定了多个快捷键的组件不能取消快捷键
26.       }
27.       .width('100%')
28.     }
29.     .height('100%')
30.   }
31. }

复制代码

最后呢

很多开发朋友不知道需要学习那些鸿蒙技能？鸿蒙开发岗位需要掌握那些核心技能点？为此鸿蒙的开发学习必须要系统性的举行。
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节流没须要的贫苦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点
如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习蹊径图。

针对鸿蒙成长蹊径打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，资助大家在技能的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
  
• 《鸿蒙生态应用开发V2.0白皮书》
  
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
  
• OpenHarmony北向、南向开发情况搭建
  
• 《鸿蒙开发基础》
  
• 《鸿蒙开发进阶》
  
• 《鸿蒙开发实战》
  

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

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