En algunos flujos del usuario, tu aplicación debe mover el enfoque de forma explícita a un componente específico. Por ejemplo, cuando un usuario hace clic en un botón "Buscar", es posible que desees enfocar automáticamente el campo de entrada de búsqueda.
Usa FocusRequester
Para solicitar el enfoque de forma explícita, haz lo siguiente:
- Crea y recuerda una instancia de
FocusRequester:val focusRequester = remember { FocusRequester() }. - Adjunta el
FocusRequesteral elemento componible de destino con el modificadorfocusRequester. - Llama a
requestFocus()dentro de una devolución de llamada de evento (comoonClick) o un alcance de corrutina.
val focusRequester = remember { FocusRequester() } var text by remember { mutableStateOf("") } TextField( value = text, onValueChange = { text = it }, modifier = Modifier.focusRequester(focusRequester) )
val focusRequester = remember { FocusRequester() } var text by remember { mutableStateOf("") } TextField( value = text, onValueChange = { text = it }, modifier = Modifier.focusRequester(focusRequester) ) Button(onClick = { focusRequester.requestFocus() }) { Text("Request focus on TextField") }
Cómo establecer el enfoque inicial de la pantalla
Para colocar el enfoque inicial en un componente específico cuando aparece una pantalla por primera vez, activa requestFocus() dentro de un LaunchedEffect(Unit):
LaunchedEffect(Unit) {
focusRequester.requestFocus()
}
Cuando navegas entre contenedores o vuelves de otra pantalla, también puedes adjuntar focusRestorer() a los contenedores principales para devolver automáticamente el enfoque al último elemento secundario enfocado.
Para obtener más información, consulta la guía Cómo restablecer el enfoque.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Objetivos de enfoque
- Agrupa los destinos de enfoque
- Restablecer el enfoque
- Mover y borrar el enfoque