Cómo enfocar automáticamente en el campo de texto en Jetpack Compose. Cuando hago clic en el campo de texto y empiezo a escribir en él. Mientras tanto, cuando hago clic en el botón Atrás, cuando trato de hacer clic en el campo de texto, no sucede nada.
val textState = remember { mutableStateOf(TextFieldValue()) } TextField( modifier = Modifier.fillMaxWidth(), value = textState.value, onValueChange = { value : TextFieldValue -> textState.value = value } )Tomado de Compose Unit Tests y aplicado a TextField Link
@ExperimentalFocus @Composable fun AutoFocusingText() { val textState = remember { mutableStateOf(TextFieldValue()) } val focusState = remember { mutableStateOf(FocusState.Inactive) } val focusRequester = FocusRequester() val focusModifier = Modifier.focus() Row( modifier = Modifier.focusObserver { focusState.value = it } ) { val focusRequesterModifier = Modifier.focusRequester(focusRequester) TextField( modifier = focusModifier.then(focusRequesterModifier), value = textState.value, onValueChange = { value: TextFieldValue -> textState.value = value }, ) } onActive { focusRequester.requestFocus() } }Editar: cuadro cambiado a fila porque el cuadro ha quedado obsoleto en '1.0.0-alpha04'
Con 1.0.x puedes usar algo como:
var text by remember { mutableStateOf("text") } // initialize focus reference to be able to request focus programmatically val focusRequester = FocusRequester() Column { TextField( value = text, onValueChange = { text = it }, label = { Text("label") }, modifier = Modifier // add focusRequester modifier .focusRequester(focusRequester) ) Luego use focusRequester.requestFocus() . De esta forma el sistema otorga foco al componente asociado a este FocusRequester .
Para que el campo se enfoque automáticamente cuando aparece la pantalla, puede usar:
DisposableEffect(Unit) { focusRequester.requestFocus() onDispose { } }Para otorgar manualmente el foco al campo:
Button(onClick = { focusRequester.requestFocus() }) { Text("Click to give the focus") }Publicar una respuesta actualizada a la pregunta (se cambió el nombre de las API en Compose Beta)
@Composable fun AutoFocusingText() { var value by mutableStateOf("Enter Text") val focusRequester = remember { FocusRequester() } TextField( value = value, onValueChange = { value = it }, modifier = Modifier.focusRequester(focusRequester) ) LaunchedEffect(Unit) { focusRequester.requestFocus() } }Si desea que su campo de texto se enfoque automáticamente cuando navega a la pantalla, puede usar esto. Esto le permite no requestFocus durante la composición, lo cual no es algo que deba hacer. De lo contrario, obtendrá IllegalStateException con el mensaje "FocusRequester no está inicializado" a veces.
@Composable fun YourComposable(){ val focusRequester = remember {FocusRequester()} LaunchedEffect(Unit) { this.coroutineContext.job.invokeOnCompletion { focusRequester.requestFocus() } } OutlinedTextField( modifier = Modifier.focusRequester(focusRequester)) } Esto se debe a que la rutina dentro LaucnhedEffeect se cancelará cuando LaunchedEffect abandone la composición.
` @Composable fun SomeComposable() { val focusRequester = recordar { FocusRequester() }
OutlinedTextField( value = TextFieldValue( text = state.text, // state come from else where selection = TextRange(state.text.length,state.text.length)), onValueChange = { _:TextFieldValue -> Unit }, modifier = Modifier .fillMaxWidth() .focusRequester(focusRequester),) SideEffect { focusRequester.requestFocus() } }`
Por qué SideEffect : https://developer.android.com/reference/kotlin/androidx/compose/runtime/package-summary#SideEffect(kotlin.Function0) la primera línea de documentos.
Para la posición del cursor que ayudó: https://stackoverflow.com/a/65565502/6813176
onValueChanged se quedó como está en mi código de trabajo, no lo necesito.
val focusRequester = remember { FocusRequester() } val inputService = LocalTextInputService.current val focus = remember { mutableStateOf(false) } BasicTextField( value = "value", modifier = Modifier .height(40.dp) .fillMaxWidth() .focusRequester(focusRequester) .onFocusChanged { if (focus.value != it.isFocused) { focus.value = it.isFocused if (!it.isFocused) { inputService?.hideSoftwareKeyboard() } } }, ), LaunchedEffect("") { delay(300) inputService?.showSoftwareKeyboard() focusRequester.requestFocus() }