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

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

鸿蒙开发-UI-图形-组件内转场动画

鸿蒙开发-UI-图形-弹簧曲线动画

鸿蒙开发-UI-交互事件-通用事件

鸿蒙开发-UI-交互事件-键鼠事件

文章目录

前言

一、基本概念

二、走焦规则

三、监听组件焦点变化

四、设置组件是否获焦

五、自定义默认焦点

六、自定义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)")