En algunos flujos de usuarios, 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 quieras colocar automáticamente el foco en 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 permiso 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") }
Establece 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 regresas de otra pantalla,
también puedes adjuntar focusRestorer() a los contenedores superiores
para devolver automáticamente el enfoque al último elemento secundario enfocado.
Para obtener más información, consulta la guía Restablece 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
- Restablece el enfoque
- Cómo mover y borrar el enfoque