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

参考链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: