【小源笔记】第二期 | 如何为应用适配焦点控制原创

Haoc_小源同学

发布于 2022-10-25 17:02

浏览

1收藏

前言

在一些依靠遥控器操作的设备例如智慧屏，按键走焦是主要的交互方式，通过焦点可以告诉用户当前聚焦的位置

当前支持焦点控制的组件有Button、Text、Image、List、Grid

如何适配

除Button还有Toggle组件外，其他组件默认都是不可获焦的，一个组件想要获得焦点，需要focusable 属性等于 true。以系统settings应用为例，首页是一个List列表容器，要给每个ListItem子项添加焦点事件，只需要给ListItem组件的子组件添加focusable(true)即可。例如首页最顶部是一个搜索框，搜索框的ListItem的子组件为Row容器组件，由于Row组件不支持焦点事件，可以给Row容器下的子组件Image或Text任一组件添加focusable属性设置为true，便可以通过键盘的TAB键或方向键进行获焦了。可获焦的组件可以触发按键事件进行操作，通过给组件添加onKeyEvent事件，在事件触发时执行相应的函数代码，例如这里判断当键盘按了回车键时就跳转页面。

List({ space: this.listSpaces }) {
  // search
  ListItem() {
    Row() {
      Image($r("app.media.ic_search"))
        ...
        .focusable(true)
        .onFocus(() => {
          this.searchFocused = true
        })
        .onBlur(() => {
          this.searchFocused = false
        })
        .onKeyEvent((event: KeyEvent) => {
          if (event.keyCode === KEYCODE_ENTER || event.keyCode === KEYCODE_NUMPAD_ENTER) {
            router.push({
              url: 'pages/searchPage'
            })
          }
        });

      Text($r("app.string.searchHint"))
        ...
    }
    ...

  ListItem() {
    List() {
      ListItem() {
        // WLAN
        SettingItemComponent({
          ...
        })
      }

      ListItem() {
        // blueTooth
        SettingItemComponent({
          ...
        })
      }

      ListItem() {
        // mobileData
        SettingItemComponent({
          ...
        })
      }
      ...
    }
    ...
  }

  ...
}

同理，为WLAN、蓝牙等ListItem添加焦点事件只需要为自定义组件SettingItemComponent下支持焦点控制的组件添加对应的属性及事件即可

@Component
export struct SettingItemComponent {
  ...
  @State isFocused: boolean = false;

  build() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Row() {
        Image(this.settingIcon)
          ...
          .focusable(true)
          .onFocus(() => {
            this.isFocused = true
          })
          .onBlur(() => {
            this.isFocused = false
          })
          .onKeyEvent((event: KeyEvent) => {
            if (event.keyCode === 2054 || event.keyCode === 2119) {
              SettingListModel.onSettingItemClick(this.targetPage);
            }
          })

        Text(this.settingTitle)
          ...
      }
      ...

      Row() {
        Text(this.settingEndText)
          ...

        Image('/res/image/ic_settings_arrow.svg')
          ...
      }
      ...
    }
    .linearGradient(this.isTouched || this.isFocused ? {
                                                         angle: 90,
                                                         direction: GradientDirection.Right,
                                                         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
                                                       } : {
                                                             angle: 90,
                                                             direction: GradientDirection.Right,
                                                             colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
                                                           })
    ...
  }
}