鸿蒙开发-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)")
.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键的走焦顺序，下文将学习手势事件。
