鸿蒙开发-UI-交互事件-焦点事件

时间：2024-03-27 08:20:32

文章目录

前言

一、基本概念

二、走焦规则

三、监听组件焦点变化

四、设置组件是否获焦

五、自定义默认焦点

六、自定义TAB键走焦顺序

1.groupDefaultFocus

2.focusOnTouch

3.focusControl.requestFocus

总结

前言

上文详细学习了鸿蒙开发UI交互事件中的键鼠事件，了解了键鼠事件的数据流，学习了各种事件的回调函数，以及响应示例代码，本文将学习鸿蒙开发UI交互焦点事件。

一、基本概念

二、走焦规则

走焦规则是指用户使用“TAB键/SHIFT+TAB键/方向键”主动进行走焦，或焦点系统在执行被动走焦时的顺序规则。组件的走焦规则默认由走焦系统定义，由焦点所在的容器决定。

三、监听组件焦点变化

//获焦事件回调，绑定该API的组件获焦时，回调响应。
onFocus(event: () => void)

//失焦事件回调，绑定该API的组件失焦时，回调响应。
onBlur(event:() => void)

代码示例：通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
 

@Entry
@Component
struct FocusEventExample {
  @State oneButtonColor: Color = Color.Gray;
  @State twoButtonColor: Color = Color.Gray;
  @State threeButtonColor: Color = Color.Gray;
  build() {
    Column({ space: 20 }) {
      Button('First Button')
        .width(260)
        .height(70)
        .backgroundColor(this.oneButtonColor)
        .fontColor(Color.Black)
//step1：onFocus监听第一个组件的获焦事件，获焦后改变颜色，onBlur监听第一个组件的失焦事件，失焦后改变颜色
        .onFocus(() => {
          this.oneButtonColor = Color.Green;
        })
        .onBlur(() => {
          this.oneButtonColor = Color.Gray;
        })

      Button('Second Button')
        .width(260)
        .height(70)
        .backgroundColor(this.twoButtonColor)
        .fontColor(Color.Black)
//step2：onFocus监听第二个组件的获焦事件，获焦后改变颜色，onBlur监听第二个组件的失焦事件，失焦后改变颜色
        .onFocus(() => {
          this.twoButtonColor = Color.Green;
        })
        .onBlur(() => {
          this.twoButtonColor = Color.Grey;
        })

      Button('Third Button')
        .width(260)
        .height(70)
        .backgroundColor(this.threeButtonColor)
        .fontColor(Color.Black)
//step3：onFocus监听第三个组件的获焦事件，获焦后改变颜色，onBlur监听第三个组件的失焦事件，失焦后改变颜色
        .onFocus(() => {
          this.threeButtonColor = Color.Green;
        })
        .onBlur(() => {
          this.threeButtonColor = Color.Gray ;
        })
    }.width('100%').margin({ top: 20 })
  }
}

注：焦点变化行为

1.应用打开，“First Button”默认获取焦点，onFocus回调响应，背景色变成绿色，按下TAB或者方向键，“First Button”显示焦点样式，不触发走焦，焦点任然在“First Button”上。

2.按下TAB或方向键，触发走焦，“Second Button”获焦，onFocus回调响应，背景色变成绿色；“First Button”失焦、onBlur回调响应，背景色变回灰色。

3.按下TAB或方向键，触发走焦，“Third Button”获焦，onFocus回调响应，背景色变成绿色；“Second Button”失焦、onBlur回调响应，背景色变回灰色。

四、设置组件是否获焦

//通过focusable接口设置组件是否可获焦
focusable(value: boolean)

五、自定义默认焦点

焦点系统在页面初次构建完成时，会搜索当前页下的所有组件，找到第一个绑定了defaultFocus(true)的组件，然后将该组件置为默认焦点，若无任何组件绑定defaultFocus(true)，则将第一个找到的可获焦的组件置为默认焦点。

//默认焦点的设置接口
defaultFocus(value: boolean)

六、自定义TAB键走焦顺序

tabIndex用于设置自定义TAB键走焦顺序，默认值为0。使用“TAB/Shift+TAB键”走焦时（方向键不影响），系统会自动获取到所有配置了tabIndex大于0的组件，然后按照递增/递减排序进行走焦。

1.groupDefaultFocus

需要与tabIndex组合使用，使用tabIndex给区域（容器）绑定走焦顺序，然后给Button1、左箭头、ButtonOK绑定groupDefaultFocus(true)，这样在首次走焦到目标区域（容器）上时，它的绑定了groupDefaultFocus(true)的子组件同时获得焦点。

groupDefaultFocus(value: boolean)

2.focusOnTouch

指使用触屏或鼠标左键进行单击组件，获焦能力，参数：boolean，默认值：false（输入类组件：TextInput、TextArea、Search、Web默认值是true）。给容器绑定focusOnTouch(true)时，点击容器区域，会立即使容器的第一个可获焦组件获得焦点。

focusOnTouch(value: boolean)

3.focusControl.requestFocus

主动申请焦点能力的全局方法，参数：string，参数表示被申请组件的id（通用属性id设置的字符串）。在任意执行语句中调用该API，指定目标组件的id为方法参数，当程序执行到该语句时，会立即给指定的目标组件申请焦点。

focusControl.requestFocus(id: string)

代码示例

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct RequestFocusExample {
  @State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'N']
  @State requestId: number = 0

  build() {
    Column({ space:20 }){
//step1：定义6个Button组件，其中Button-A组件设置了focusable(false)，表示其不可获焦
      Row({space: 5}) {
//step3：键盘上按下B键，申请Button-B的焦点，气泡显示Request success，表示获焦到了焦点，焦点位置原本就在Button-B，位置未改变
        Button("id: " + this.idList[0] + " focusable(false)")
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[0])
          .focusable(false)
//step4：键盘上按下A键，申请Button-A的焦点，气泡显示Request failed，表示无法获取到焦点，焦点位置未改变
        Button("id: " + this.idList[1])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[1])
      }
      Row({space: 5}) {
//step5：键盘上按下C键，申请Button-C的焦点，气泡显示Request success，表示获焦到了焦点，焦点位置从Button-B变更为Button-C
        Button("id: " + this.idList[2])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[2])
//step6：键盘上按下D键，申请Button-D的焦点，气泡显示Request success，表示获焦到了焦点，焦点位置从Button-C变更为Button-D
        Button("id: " + this.idList[3])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[3])
      }
      Row({space: 5}) {
//step7：键盘上按下E键，申请Button-E的焦点，气泡显示Request success，表示获焦到了焦点，焦点位置从Button-D变更为Button-E
        Button("id: " + this.idList[4])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[4])
//step8：键盘上按下F键，申请Button-F的焦点，气泡显示Request success，表示获焦到了焦点，焦点位置从Button-E变更为Button-F
        Button("id: " + this.idList[5])
          .width(200).height(70).fontColor(Color.White)
          .id(this.idList[5])
      }
    }.width('100%').margin({ top:20 })
//step2：Column容器的onKeyEvent中，监听按键事件，当按下A ~ F按键时，分别去申请Button A ~ F 的焦点，按下N键，是给当前页面上不存在的id的组件去申请焦点。
    .onKeyEvent((e) => {
      if (e.keyCode >= 2017 && e.keyCode <= 2022) {
        this.requestId = e.keyCode - 2017;
      } else if (e.keyCode === 2030) {
        this.requestId = 6;
      } else {
        return;
      }
      if (e.type !== KeyType.Down) {
        return;
      }
      let res = focusControl.requestFocus(this.idList[this.requestId]);
      if (res) {
        promptAction.showToast({message: 'Request success'});
      } else {
        promptAction.showToast({message: 'Request failed'});
      }
    })
  }
}

注：

1.按下TAB键，由于第一个组件Button-A设置了无法获焦，那么默认第二个组件Button-B获焦，Button-B展示焦点态样式

2.键盘上按下N键，申请未知组件的焦点，气泡显示Request failed，表示无法获取到焦点，焦点位置不变

总结

本文学习鸿蒙开发UI交互焦点事件，了解焦点、获焦、失焦、走焦等相关概念，详细学习了走焦的相关规则，以及设置组件是否获焦的接口，最后学习了自定义TAB键的走焦顺序，下文将学习手势事件。

相关文章