HarmonyOS通用事件之焦点事件_使用外接键盘按下tab键时会进入焦点的激活态-CSDN博客

本文链接：https://blog.csdn.net/weixin_58881409/article/details/145270159

焦点事件

概念

焦点

指向当前应用界面上唯一一个可交互元素，当用户使用键盘，遥控器，遥杆，按钮等非指向性输入设备与应用程序进行间接交互，基于焦点的导航和交互是最重要的手段

焦点链

在应用组件树结构中，当一个组件获取到焦点的时候，从根节点到该组件节点的整条路径上所有节点都会视为焦点状态所形成一条连续的焦点链

焦点

指焦点在应用内组件之间转移的行为。
这一过程对用户是透明的（用户不可见），对开发者是可以通过onFocus(焦点获取)和onBlur(焦点失去)事件来捕捉这些变化

焦点态

默认情况下焦点态不会显示，只有当应用进入激活状态，焦点态才会显示
有焦点和有焦点状态（必要不充分）
如果多个组件同时拥有焦点态，系统将采用子组件优先策略，优先显示子组件的焦点态并且仅显示一个焦点态

进入激活态

仅使用外接键盘按下Tab键时会进入焦点的激活态
进入激活态后，可以使用Tab和方向键进行走焦
首次使用Tab键进入激活态不会触发走焦

退出激活态

当应用收到点击事件时，焦点激活态会退出

层级页面

焦点框架中特点容器的总称：Page，Menu，NavBar，Popup，NavDestination这些组件拥有以下特性

视觉层级独立性：从视觉呈现上看，这些组件独立于其他页面内容，并通常位于其上方形成视觉上的层级差异
焦点跟随：此类组件首次创建并展示之后，会立即将应用内焦点抢占
走焦范围限制：当焦点位于这些组件内部，用户无法通过键盘按键将焦点转移到组件外部，其他元素焦点移动仅限于组件内部

根容器

根容器是层级页面的概念，当某个层级页面首次创建并展示时，根据层级页面的特性，焦点会立即被该页面抢占此时，该层级页面所在焦点链的末端节点将成为默认焦点
这个默认焦点通常位于该层级页面的根容器上

走焦规范

主动走焦

指开发者/用户主观行为导致的焦点移动
包括:使用键盘按键走焦(TAB/Shift + TAB/方向键)
使用requestFocus申请焦点、clearFocus清除焦点
focusOnTouch点击申请焦点等接口导致的焦点转移

被动走焦

指组件焦点因系统或者其他操作而自动转移，无需开发者直接干预，这是焦点系统的默认行为

**组件删除：**当处于焦点状态的组件被删除，焦点框架首先尝试将焦点转移到相邻兄弟组件上，遵循先向后再向前。若所有兄弟组件均不可获焦，则焦点释放，并通知父组件进行焦点处理
**属性变更：若处于焦点状态的组件的focusable（是否获取焦点）或enable（是否有交互能力）属性设置false，或者visibility属性设置为不可见，**系统将自定将焦点转移到其他可获焦组件，转移方式同1
**层级页面切换：**当发生层级页面切换时，如从一个页面跳转另一个页面，当页面的焦点将自动释放，新页面根据预设逻辑自动获得焦点
**web组件初始化（可能）：**对web组件，当其被创建时，若其设置需要立即获取焦点，如某一些弹出框或输入框，则可能触发焦点转移至该web组件

默认焦点

页面默认焦点

defaultFocus(value:bolean)

容器默认焦点

focusScopePriority

页面默认焦点的优先级大于容器的默认焦点的优先级，后面按顺序

focusScopPriority

 focusScopPriority( scopeId, priority?: FocusPriority )

设置当前组件在指定容器内获焦的优先级，需要配合focusScopeId一起使用

focusScopeId

 focusScopeId( id:string, isGroup?: boolean )

设置当前容器的id标识，设置当前容器组件是否为焦点组
id:string，设置id标识，全局唯一，不可重复
isGroup：设置当前容器组件是否为焦点组焦点组不能嵌套，不可重复配置，配置焦点组的目的是使容器及容器内的元素可以按照焦点组规则走焦
1. 焦点组容器内容只能通过方向键走焦,tab键会使得焦点跳出焦点组容器
2. 通过方向键使焦点从焦点组容器外切换到焦点组容器内时，若容器内存在优先级位PREVIOUS的组件，则其获焦，否则由焦点组容器上次获焦的组件获焦

FocusPriority

AUTO：默认的优先级，缺省时组件的获焦优先级
PRIOR：容器内容优先获焦优先级，比AUTO高
PREVIOUS：上一个容器整体失焦节点的优先，优先级高于PRIOR

样例

样例一

// oneButton,twoButton,threeButton   颜色的状态变量
   Column({
    space:20 }){
   
      Button('第一个按钮')
        .width(260)
        .height(70)
        // @State flg : boolean = false
        .visibility(this.flg ? Visibility.Visible : Visibility.Hidden)
        .backgroundColor(this.oneButton)
          //监听第一个按钮的获焦事件，获焦之后改变颜色
        .onFocus(() => {
   
          this.oneButton = Color.Green
        })
          //监听第一个按钮的失焦事件，失焦之后改变颜色
        .onBlur(() => {
   
          this.oneButton = Color.Gray
        })
        .onClick(() => {
   
          this.flg = !this.flg
        })
      Button('第二个按钮')
        .