文档管理中心

智能表如何适配智慧手势

问题现象

智慧手势是智能穿戴设备除屏幕交互、表冠交互和按键交互外的独特感知交互方式,应用如何进行适配?

效果预览

  1. 佩戴智能表,开启智慧手势识别开关:设置-手势-智慧手势识别。打开应用:

  2. 捏合确认,第一个按钮文字变为“Confirmed”:

  3. 滑动切焦,焦点从第一个按钮切换到第二个按钮:

  4. 捏合确认,第二个按钮文字变为“Confirmed”:

背景知识

  • 使用智慧手势功能要确保设备上的智慧手势识别开关已打开。
  • 手势类型包括捏合确认和滑动切焦。捏合确认会触发组件的onKeyEvent事件,KeyCode为KEYCODE_ENTER,type为KeyType.Down。滑动切焦会分别触发失焦组件和获焦组件的onBluronFocus事件。

解决方案

  1. 使用activate激活当前界面的焦点激活态。
    收起
    自动换行
    深色代码主题
    复制
    1. aboutToAppear(): void {
    2. this.getUIContext().getFocusController().activate(true, false);
    3. }
  2. 激活焦点激活态后,可调用requestFocus方法使目标组件获得焦点,随后手势操作方可生效。
    收起
    自动换行
    深色代码主题
    复制
    1. onDidBuild(): void {
    2. try {
    3. // register a button to get focus by default.
    4. this.getUIContext().getFocusController().requestFocus('btn1');
    5. } catch (error) {
    6. console.error(`requestFocus function error. Code is ${error.code}, message is ${error.message}.`);
    7. }
    8. }
  3. 捏合确认会触发组件的onKeyEvent事件,KeyCode为KEYCODE_ENTER,type为KeyType.Down,应用可以在该条件触发后进行功能执行。
    收起
    自动换行
    深色代码主题
    复制
    1. .onKeyEvent((event: KeyEvent) => {
    2. if (event.keyCode === KeyCode.KEYCODE_ENTER && event.type === KeyType.Down) {
    3. // Trigger the pinching gesture
    4. this.oneButton1Text = 'Confirmed';
    5. }
    6. });
  4. 滑动切焦会分别触发失焦组件和获焦组件的onBlur和onFocus事件,应用可以在该条件触发后进行功能执行。
    收起
    自动换行
    深色代码主题
    复制
    1. .onFocus(() => {
    2. this.oneButton1Text = 'One';
    3. this.oneButton2Text = 'Two';
    4. })
    5. .onBlur(() => {
    6. this.oneButton1Text = 'One';
    7. })
  5. 退出页面时,设置当前界面的焦点激活态为false,退出焦点激活态。
    收起
    自动换行
    深色代码主题
    复制
    1. aboutToDisappear(): void {
    2. this.getUIContext().getFocusController().activate(false);
    3. }

完整示例参考如下:

收起
自动换行
深色代码主题
复制
  1. import { KeyCode } from '@kit.InputKit';
  2. import { ColorMetrics, LengthMetrics } from '@kit.ArkUI';
  3. @Entry
  4. @Component
  5. struct Index {
  6. @State oneButton1Text: string = 'One';
  7. @State oneButton2Text: string = 'Two';
  8. aboutToAppear(): void {
  9. this.getUIContext().getFocusController().activate(true, false);
  10. }
  11. onDidBuild(): void {
  12. try {
  13. // register a button to get focus by default.
  14. this.getUIContext().getFocusController().requestFocus('btn1');
  15. } catch (error) {
  16. console.error(`requestFocus function error. Code is ${error.code}, message is ${error.message}.`);
  17. }
  18. }
  19. aboutToDisappear(): void {
  20. this.getUIContext().getFocusController().activate(false);
  21. }
  22. build() {
  23. NavDestination() {
  24. Scroll() {
  25. Column({ space: 20 }) {
  26. Button(this.oneButton1Text)
  27. .width(165)
  28. .height(40)
  29. .focusBox({
  30. margin: LengthMetrics.px(10),
  31. strokeColor: ColorMetrics.rgba(255, 255, 255),
  32. strokeWidth: LengthMetrics.px(5)
  33. })
  34. .defaultFocus(true)
  35. .id('btn1')
  36. .onFocus(() => {
  37. this.oneButton1Text = 'One';
  38. this.oneButton2Text = 'Two';
  39. })
  40. .onBlur(() => {
  41. this.oneButton1Text = 'One';
  42. })
  43. .onKeyEvent((event: KeyEvent) => {
  44. if (event.keyCode === KeyCode.KEYCODE_ENTER && event.type === KeyType.Down) {
  45. // Trigger the pinching gesture
  46. this.oneButton1Text = 'Confirmed';
  47. }
  48. });
  49. Button(this.oneButton2Text)
  50. .width(165)
  51. .height(40)
  52. .focusBox({
  53. margin: LengthMetrics.px(10),
  54. strokeColor: ColorMetrics.rgba(255, 255, 255),
  55. strokeWidth: LengthMetrics.px(5)
  56. })
  57. .onFocus(() => {
  58. this.oneButton1Text = 'One';
  59. this.oneButton2Text = 'Two';
  60. })
  61. .onBlur(() => {
  62. this.oneButton2Text = 'Two';
  63. })
  64. .onKeyEvent((event: KeyEvent) => {
  65. if (event.keyCode === KeyCode.KEYCODE_ENTER && event.type === KeyType.Down) {
  66. // Trigger the pinching gesture
  67. this.oneButton2Text = 'Confirmed';
  68. }
  69. });
  70. }
  71. .alignItems(HorizontalAlign.Center)
  72. .justifyContent(FlexAlign.Center)
  73. .width('100%')
  74. .height('100%');
  75. };
  76. }
  77. .hideTitleBar(true)
  78. .width('100%')
  79. .height('100%');
  80. }
  81. }
在 FAQ 中进行搜索
请输入您想要搜索的关键词