# 智能表如何适配智慧手势

#### 问题现象

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

#### 效果预览

1.  佩戴智能表，开启智慧手势识别开关：设置-手势-智慧手势识别。打开应用：
    
2.  捏合确认，第一个按钮文字变为“Confirmed”：
    
3.  滑动切焦，焦点从第一个按钮切换到第二个按钮：
    
4.  捏合确认，第二个按钮文字变为“Confirmed”：
    

#### 背景知识

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

#### 解决方案

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

完整示例参考如下：

```
import { KeyCode } from '@kit.InputKit';
import { ColorMetrics, LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State oneButton1Text: string = 'One';
  @State oneButton2Text: string = 'Two';

  aboutToAppear(): void {
    this.getUIContext().getFocusController().activate(true, false);
  }

  onDidBuild(): void {
    try {
      // register a button to get focus by default.
      this.getUIContext().getFocusController().requestFocus('btn1');
    } catch (error) {
      console.error(`requestFocus function error. Code is ${error.code}, message is ${error.message}.`);
    }
  }

  aboutToDisappear(): void {
    this.getUIContext().getFocusController().activate(false);
  }

  build() {
    NavDestination() {
      Scroll() {
        Column({ space: 20 }) {
          Button(this.oneButton1Text)
            .width(165)
            .height(40)
            .focusBox({
              margin: LengthMetrics.px(10),
              strokeColor: ColorMetrics.rgba(255, 255, 255),
              strokeWidth: LengthMetrics.px(5)
            })
            .defaultFocus(true)
            .id('btn1')

            .onFocus(() => {
              this.oneButton1Text = 'One';
              this.oneButton2Text = 'Two';
            })
            .onBlur(() => {
              this.oneButton1Text = 'One';
            })
            .onKeyEvent((event: KeyEvent) => {
              if (event.keyCode === KeyCode.KEYCODE_ENTER && event.type === KeyType.Down) {
                // Trigger the pinching gesture
                this.oneButton1Text = 'Confirmed';
              }
            });
          Button(this.oneButton2Text)
            .width(165)
            .height(40)
            .focusBox({
              margin: LengthMetrics.px(10),
              strokeColor: ColorMetrics.rgba(255, 255, 255),
              strokeWidth: LengthMetrics.px(5)
            })
            .onFocus(() => {
              this.oneButton1Text = 'One';
              this.oneButton2Text = 'Two';
            })
            .onBlur(() => {
              this.oneButton2Text = 'Two';
            })
            .onKeyEvent((event: KeyEvent) => {
              if (event.keyCode === KeyCode.KEYCODE_ENTER && event.type === KeyType.Down) {
                // Trigger the pinching gesture
                this.oneButton2Text = 'Confirmed';
              }
            });

        }
        .alignItems(HorizontalAlign.Center)
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%');
      };
    }
    .hideTitleBar(true)
    .width('100%')
    .height('100%');
  }
}
```