Mettere in pausa e riprendere la riproduzione dei contenuti multimediali con la barra spaziatrice della tastiera

L'ottimizzazione per schermi di grandi dimensioni include la possibilità di gestire gli input della tastiera esterna, ad esempio la reazione alla pressione della barra spaziatrice per mettere in pausa o riprendere la riproduzione di video e altri contenuti multimediali. Questo è particolarmente utile per i tablet, che spesso si collegano a tastiere esterne, e per i Chromebook, che di solito sono dotati di tastiere esterne, ma possono essere utilizzati in modalità tablet.

Quando i contenuti multimediali sono l'unico elemento della finestra (ad esempio la riproduzione di video a schermo intero), rispondi agli eventi di pressione dei tasti a livello di schermo in Jetpack Compose.

Best practice

Ogni volta che l'app riproduce un file multimediale, gli utenti devono poter mettere in pausa e riprendere la riproduzione premendo la barra spaziatrice su una tastiera fisica.

Ingredienti

• KEYCODE_SPACE: costante del codice tasto per la barra spaziatrice.
• onPreviewKeyEvent: Modifier che consente a un componente di intercettare gli eventi dei tasti hardware quando il componente (o uno dei suoi elementi secondari) è attivo.
• onKeyEvent: simile a onPreviewKeyEvent, questo Modifier consente a un componente di intercettare gli eventi dei tasti hardware quando il componente (o uno dei suoi elementi secondari) è attivo.

Passaggi

Per rispondere alla pressione dei tasti della tastiera in Jetpack Compose, la tua app deve ascoltare gli eventi di pressione dei tasti, filtrarli e rispondere alle pressioni dei tasti selezionate, ad esempio la pressione della barra spaziatrice.

1. Ascolta gli eventi della tastiera

Con Jetpack Compose, puoi utilizzare il modificatore onPreviewKeyEvent o onKeyEvent all'interno del componente che gestisce la pressione dei tasti.

La differenza principale tra i due modificatori è la destinazione dell'evento se il modificatore non lo utilizza:

• onPreviewKeyEvent: invia l'evento al primo elemento secondario.
• onKeyEvent: invia l'evento al composable principale.

2. Filtra e gestisci le pressioni della barra spaziatrice

All'interno della funzione lambda del modificatore onPreviewKeyEvent o onKeyEvent, filtra gli eventi dei tasti in cui il rilascio del tasto (KeyEventType.KeyUp) corrisponde alla barra spaziatrice (Key.Spacebar).

Restituisci true se il tuo codice gestisce l'evento e non vuoi che l'evento si propaghi ulteriormente. Restituisci false per consentire ad altri componenti di gestire l'evento.

• Opzione A: utilizza onPreviewKeyEvent

  Column(
      modifier = Modifier.onPreviewKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

• Opzione B: utilizzo di onKeyEvent

  Column(
      modifier = Modifier.onKeyEvent { event ->
          if (event.type == KeyEventType.KeyUp && event.key == Key.Spacebar) {
              // Handle spacebar keypress to pause/resume playback.
              true
          } else {
              false
          }
      }
  ) {
      // Content
  }
  AdaptiveAppCookbook.kt

Risultati

La tua app ora può rispondere alla pressione della barra spaziatrice per mettere in pausa e riprendere un video o un altro contenuto multimediale.

Risorse aggiuntive

Per scoprire di più sugli eventi della tastiera e su come gestirli, consulta Gestisci l'input da tastiera.