鸿蒙HarmonyOS 【ArkTS组件】 焦点事件

📑往期推文全新看点（附带最新·鸿蒙全栈学习笔记）

嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

分享一场鸿蒙开发面试经验记录（三面全过程）

鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

持续更新中。。。

---

 

焦点事件指页面焦点在可获焦组件间移动时触发的事件，组件可使用焦点事件来处理相关逻辑。

说明

• 目前仅支持通过外接键盘的tab键、方向键触发。不支持嵌套滚动组件场景按键走焦。

• 存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件默认状态为不可获焦，不可获焦状态下，无法触发焦点事件，需要设置focusable属性为true才可触发。

• 焦点开发参考焦点开发指南

onFocus

onFocus(event: () => void)

当前组件获取焦点时触发的回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onBlur

onBlur(event:() => void)

当前组件失去焦点时触发的回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例

该示例展示了组件获焦和失焦的情况，按钮获焦和失焦时会改变按钮的颜色。

1. // xxx.ets
   @Entry
   @Component
   struct FocusEventExample {
     @State oneButtonColor: string = '#FFC0CB'
     @State twoButtonColor: string = '#87CEFA'
     @State threeButtonColor: string = '#90EE90'
   
     build() {
       Column({ space: 20 }) {
         // 通过外接键盘的上下键可以让焦点在三个按钮间移动，按钮获焦时颜色变化，失焦时变回原背景色
         Button('First Button')
           .backgroundColor(this.oneButtonColor)
           .width(260)
           .height(70)
           .fontColor(Color.Black)
           .focusable(true)
           .onFocus(() => {
             this.oneButtonColor = '#FF0000'
           })
           .onBlur(() => {
             this.oneButtonColor = '#FFC0CB'
           })
         Button('Second Button')
           .backgroundColor(this.twoButtonColor)
           .width(260)
           .height(70)
           .fontColor(Color.Black)
           .focusable(true)
           .onFocus(() => {
             this.twoButtonColor = '#FF0000'
           })
           .onBlur(() => {
             this.twoButtonColor = '#87CEFA'
           })
         Button('Third Button')
           .backgroundColor(this.threeButtonColor)
           .width(260)
           .height(70)
           .fontColor(Color.Black)
           .focusable(true)
           .onFocus(() => {
             this.threeButtonColor = '#FF0000'
           })
           .onBlur(() => {
             this.threeButtonColor = '#90EE90'
           })
       }.width('100%').margin({ top: 20 })
     }
   }