Reagisci per concentrarti

Fornisci indizi visivi per facilitare la visualizzazione del focus

Anche se tutti gli elementi attivabili del tema Material hanno già uno stile di impostazione corrispondente al tema, potrebbe essere necessario aggiungere alcuni elementi visivi per rendere più facile l'individuazione dell'elemento attivo. Una buona soluzione è modificare il bordo dell'elemento con un colore che abbia un buon contrasto con lo sfondo:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}
FocusSnippets.kt

In questo esempio, remember viene utilizzato per archiviare il colore del bordo tra le ricomposizioni e il contorno dell'elemento viene aggiornato ogni volta che l'elemento aumenta o perde lo stato attivo.

Implementare segnali visivi avanzati

Con Jetpack Compose, puoi inoltre creare indizi visivi più sofisticati e avanzati che si abbinano meglio alla tua UI.

1. Per prima cosa, crea un elemento IndicationInstance che disegna visivamente il segnale che vuoi inserire nell'interfaccia utente:

   private class MyHighlightIndicationInstance(isEnabledState: State<Boolean>) :
       IndicationInstance {
       private val isEnabled by isEnabledState
       override fun ContentDrawScope.drawIndication() {
           drawContent()
           if (isEnabled) {
               drawRect(size = size, color = Color.White, alpha = 0.2f)
           }
       }
   }
   FocusSnippets.kt

2. Poi, crea un Indication e ricorda lo stato attivo:

   class MyHighlightIndication : Indication {
       @Composable
       override fun rememberUpdatedInstance(interactionSource: InteractionSource):
           IndicationInstance {
           val isFocusedState = interactionSource.collectIsFocusedAsState()
           return remember(interactionSource) {
               MyHighlightIndicationInstance(isEnabledState = isFocusedState)
           }
       }
   }
   FocusSnippets.kt

3. Aggiungi Indication e InteractionSource all'interfaccia utente mediante il modificatore indication():

   val highlightIndication = remember { MyHighlightIndication() }
   var interactionSource = remember { MutableInteractionSource() }
   
   Card(
       modifier = Modifier
           .clickable(
               interactionSource = interactionSource,
               indication = highlightIndication,
               enabled = true,
               onClick = { }
           )
   ) {}
   FocusSnippets.kt

Comprendere lo stato dell'oggetto principale

In genere, ogni volta che uno stato dell'elemento attivo cambia, viene attivato un FocusEvent per l'albero e i principali di un modificatore focusable() possono ascoltarlo utilizzando il modificatore onFocusChanged().

Per conoscere lo stato dell'attenzione,puoi utilizzare queste API in combinazione con il modificatore onFocusChanged:

• isFocused restituisce true se l'elemento componibile a cui è associato il modificatore è impostato su attivo
• hasFocus funziona in modo simile a isFocused, ma con una differenza sostanziale: invece di controllare solo quello attuale, controlla se l'elemento o uno dei suoi elementi secondari è attivo
• isCaptured restituisce true ogni volta che viene mantenuto l'elemento attivo. Questo accade, ad esempio, quando un elemento TextField contiene dati errati, in modo che il tentativo di impostare lo stato attivo su altri elementi non cancellerà l'elemento attivo.

Questi campi sono riportati di seguito:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}