焦點(diǎn)事件

焦點(diǎn)事件指頁(yè)面焦點(diǎn)在可獲焦組件間移動(dòng)時(shí)觸發(fā)的事件，組件可使用焦點(diǎn)事件來(lái)處理相關(guān)邏輯。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

• 從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
• 目前僅支持通過(guò)外接鍵盤(pán)的tab鍵、方向鍵觸發(fā)。
• 存在默認(rèn)交互邏輯的組件例如Button、TextInput等，默認(rèn)即為可獲焦，Text、Image等組件則默認(rèn)狀態(tài)為不可獲焦，不可獲焦?fàn)顟B(tài)下，無(wú)法觸發(fā)焦點(diǎn)事件，需要設(shè)置focusable屬性為true才可觸發(fā)。

事件

示例

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

// xxx.ets
@Entry
@Component
struct FocusEventExample {
  @State oneButtonColor: string = '#FFC0CB'
  @State twoButtonColor: string = '#87CEFA'
  @State threeButtonColor: string = '#90EE90'

  build() {
    Column({ space: 20 }) {
      // 通過(guò)外接鍵盤(pán)的上下鍵可以讓焦點(diǎn)在三個(gè)按鈕間移動(dòng)，按鈕獲焦時(shí)顏色變化，失焦時(shí)變回原背景色
      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 })
  }
}

審核編輯 黃宇