鴻蒙HarmonyOS實戰-ArkUI事件（鍵鼠事件）

蜀道山QAQ發表於2024-04-26
鴻蒙UI事件

🚀前言

鍵鼠事件是指在計算機操作中，使用者透過鍵盤和滑鼠來與計算機進行互動的行為。常見的鍵鼠事件包括按下鍵盤上的鍵、移動滑鼠、點選滑鼠左鍵或右鍵等等。鍵鼠事件可以觸發許多不同的操作，比如在文字編輯器中輸入文字、在遊戲中移動角色、在網頁上點選連結等等。計算機作業系統和應用程式可以透過監聽鍵鼠事件來響應使用者的操作，並進行相應的處理。

🚀一、鍵鼠事件

🔎1.滑鼠事件

🦋1.1 onHover

onHover是滑鼠事件的一種，指的是滑鼠懸停在某個元素上時觸發的事件。當滑鼠懸停在一個元素上時，可以透過onHover事件來執行一些特定的操作，比如顯示提示資訊、改變元素樣式等。

onHover(event: (isHover?: boolean) => void)

案例：

// xxx.ets
@Entry
@Component
struct MouseExample {
  @State isHovered: boolean = false;

  build() {
    Column() {
      Button(this.isHovered ? 'Hovered!' : 'Not Hover')
        .width(200).height(100)
        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
        .onHover((isHover: boolean) => { // 使用onHover介面監聽滑鼠是否懸浮在Button元件上
          this.isHovered = isHover;
        })
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

image

好像本地模擬器，預覽，遠端真機都沒效果

🦋1.2 onMouse

onMouse是一種在滑鼠與頁面的互動過程中出現的操作事件。它通常作為一種觸發函式，當使用者在頁面上使用滑鼠進行某種操作時，就會觸發相應的事件，然後執行相應的操作。onMouse事件可以用於捕捉滑鼠的各種操作，例如滑鼠點選、滑鼠移動、滑鼠滾動、滑鼠懸停等。

onMouse(event: (event?: MouseEvent) => void)

案例：

// xxx.ets
@Entry
@Component
struct MouseExample {
  @State isHovered: boolean = false;
  @State buttonText: string = '';
  @State columnText: string = '';

  build() {
    Column() {
      Button(this.isHovered ? 'Hovered!' : 'Not Hover')
        .width(200)
        .height(100)
        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
        .onHover((isHover: boolean) => {
          this.isHovered = isHover
        })
        .onMouse((event: MouseEvent) => {    // 給Button元件設定onMouse回撥
          this.buttonText = 'Button onMouse:\n' + '' +
          'button = ' + event.button + '\n' +
          'action = ' + event.action + '\n' +
          'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
          'screenXY=(' + event.screenX + ',' + event.screenY + ')';
        })
      Divider()
      Text(this.buttonText).fontColor(Color.Green)
      Divider()
      Text(this.columnText).fontColor(Color.Red)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .borderWidth(2)
    .borderColor(Color.Red)
    .onMouse((event: MouseEvent) => {    // 給Column元件設定onMouse回撥
      this.columnText = 'Column onMouse:\n' + '' +
      'button = ' + event.button + '\n' +
      'action = ' + event.action + '\n' +
      'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
      'screenXY=(' + event.screenX + ',' + event.screenY + ')';
    })
  }
}

image

好像也沒效果

事件冒泡是一種事件傳播機制，指的是當一個元素觸發了某個事件時，該事件會從觸發元素開始向上層元素逐級傳播，直到最頂層的元素為止。在事件冒泡的過程中，父級元素會逐級接收該事件，並可以選擇是否處理該事件。

具體來說，當一個元素觸發了某個事件時（比如滑鼠點選、按鍵按下等），會先執行觸發元素上繫結的事件處理函式，然後事件會向上級元素傳播，逐級執行上級元素上繫結的事件處理函式，直到達到文件頂層的根元素或者事件被停止傳播為止。

事件冒泡的好處在於它可以讓事件的處理更加靈活。透過將事件處理程式繫結在祖先元素上，可以實現對後代元素的事件統一管理。比如，當頁面中有多個按鈕時，可以透過將點選事件處理程式繫結在父元素上，來處理所有按鈕的點選事件，避免了為每個按鈕都繫結事件處理函式的繁瑣。

事件冒泡有時也可能會帶來一些問題。當多個元素重疊時，事件觸發後會逐級向上冒泡，導致多個元素都接收到了該事件，可能會產生意外的行為。在這種情況下，可以透過使用事件的stopPropagation()方法來阻止事件繼續傳播，或者使用事件的target屬性來判斷事件源，從而實現精確控制事件的處理。

event.stopPropagation()可以阻止事件冒泡

Button(this.isHovered ? 'Hovered!' : 'Not Hover')
  .width(200)
  .height(100)
  .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
  .onHover((isHover: boolean) => {
    this.isHovered = isHover;
  })
  .onMouse((event: MouseEvent) => {
    event.stopPropagation(); // 在Button的onMouse事件中設定阻止冒泡
    this.buttonText = 'Button onMouse:\n' + '' +
    'button = ' + event.button + '\n' +
    'action = ' + event.action + '\n' +
    'x,y = (' + event.x + ',' + event.y + ')' + '\n' +
    'screenXY=(' + event.screenX + ',' + event.screenY + ')';
  })

🦋1.3 hoverEffect

hover effect是指當滑鼠懸停在一個元素上時，觸發特定的效果。

hoverEffect(value: HoverEffect)

image

// xxx.ets
@Entry
@Component
struct HoverExample {
  build() {
    Column({ space: 10 }) {
      Button('Auto')
        .width(170).height(70)
      Button('Scale')
        .width(170).height(70)
        .hoverEffect(HoverEffect.Scale)
      Button('Highlight')
        .width(170).height(70)
        .hoverEffect(HoverEffect.Highlight)
      Button('None')
        .width(170).height(70)
        .hoverEffect(HoverEffect.None)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

image

🔎2.按鍵事件

🦋2.1 onKeyEvent

onKeyEvent是一個在程式設計中常見的事件處理函式，用於處理按鍵事件。當使用者按下或釋放一個按鍵時，系統會生成一個按鍵事件，然後透過呼叫onKeyEvent函式來處理這個事件。

在onKeyEvent函式中，可以根據發生的按鍵事件型別，採取相應的處理邏輯。比如，可以判斷按下的按鍵是哪個鍵，然後執行相應的操作。常見的操作包括：移動遊戲角色、開啟選單、執行特定的動作等等。

onKeyEvent(event: (event?: KeyEvent) => void)

案例

// xxx.ets
@Entry
@Component
struct KeyEventExample {
  @State buttonText: string = '';
  @State buttonType: string = '';
  @State columnText: string = '';
  @State columnType: string = '';

  build() {
    Column() {
      Button('onKeyEvent')
        .width(140).height(70)
        .onKeyEvent((event: KeyEvent) => { // 給Button設定onKeyEvent事件
          if (event.type === KeyType.Down) {
            this.buttonType = 'Down';
          }
          if (event.type === KeyType.Up) {
            this.buttonType = 'Up';
          }
          this.buttonText = 'Button: \n' +
          'KeyType:' + this.buttonType + '\n' +
          'KeyCode:' + event.keyCode + '\n' +
          'KeyText:' + event.keyText;
        })

      Divider()
      Text(this.buttonText).fontColor(Color.Green)

      Divider()
      Text(this.columnText).fontColor(Color.Red)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
    .onKeyEvent((event: KeyEvent) => { // 給父元件Column設定onKeyEvent事件
      if (event.type === KeyType.Down) {
        this.columnType = 'Down';
      } 
      if (event.type === KeyType.Up) {
        this.columnType = 'Up';
      }
      this.columnText = 'Column: \n' +
      'KeyType:' + this.buttonType + '\n' +
      'KeyCode:' + event.keyCode + '\n' +
      'KeyText:' + event.keyText;
    })
  }
}

image

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章