Generalidades

Implemente mensajes de error en el campo de redacción de texto. | Autor: Lorenzo Benevento | Septiembre 2021

Hay algunos puntos que señalar aquí. El texto de ayuda y el mensaje de error están en el mismo lugar, por lo que escribiremos un espacio en la composición y la lógica para intercambiar el contenido.También proporcionaremos Locals Entonces, la tragamonedas tendrá un tema apropiado. El icono final se puede utilizar para indicar una entrada válida o no válida, por lo que también codificaremos un parámetro para el icono de error (incluso si la lógica del icono se coloca fuera de la composición que crearemos, tiene sentido, así que no dude en hazlo de cualquier manera de esta manera).

Hay dos superposiciones para los campos de texto rellenos, al igual que los campos de texto de contorno. Por lo tanto, si queremos admitir errores en cada variante, necesitaremos crear 4 anulaciones más.Comencemos por completar el campo de texto, necesita un TextFieldValue Como value.

Nuestro combinable utiliza los mismos parámetros que los parámetros originales. material.TextField Excepto los otros dos errorMessage con helperMessage Utilice una combinación de parámetros e interceptación que aceptan valores NULL modifier Proporcionamos a Column en lugar de.Luego, pasa directamente todos los parámetros restantes hacia abajo del árbol a los parámetros originales TextField. A partir de este momento, omitiré todos los parámetros para ambos TextFields.como se puede ver material.TextField Ha sido envuelto en uno Column Esto mostrará nuestro errorMessage o helperMessage Basado en valor isError.

Agreguemos el relleno y la altura apropiados a nuestro espacio para mensajes de acuerdo con las especificaciones del material.

Si ejecutamos algunas vistas previas ahora, el resultado será:

La ubicación de nuestro mensaje es correcta, pero el color y el tamaño son completamente incorrectos.Solucionemos este problema Local!Dentro de nosotros Box Agreguemos lo siguiente:

Proporcionamos un tamaño de texto 12.sp, Si mostramos un asistente, el color del texto no cambia y esMaterialTheme.colors.error Si se muestra el texto incorrecto. Además, proporcionamos una opacidad menor para el texto de ayuda. Esto puede conducir a los siguientes resultados:

mucho mejor

Justo debajo trailingIcon Quiero agregar un parámetro errorIcon Los parámetros que podemos combinar:

errorIcon: @Composable (() -> Unit)? = null

Vamos de otra manera trailingIcon con errorIcon Por el árbol.

Tenga en cuenta que no utilizamos LocalEsta vez, fue porque material.TextField Esto se ha hecho por nosotros bajo el capó, por lo que nuestro ícono será del color correcto.

Para lograr un String Como valuecon (String) -> Unit Como onValueChanged Ampliaremos nuestra propia capacidad de composición, por lo que prometo que será indolora. Ignoraré todos los parámetros del siguiente código que no han cambiado en absoluto:

como viste String versión de TextField Solo tuyo TextFieldValue Una versión con algunas conversiones por adelantado.Oh ya veo String La versión es interna.

Haz que esta versión sea exactamente la misma pero quieres usar androidx.compose.material.OutlinedTextField En lugar de lo normal TextField Versión.Dejaré el proyecto completo a continuación, contiene OutlinedTextFields ¡Hay soporte para errores!

¡gracias por leer! ! 😁

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba