Generalidades

El estado ascendente de los objetos componibles | Autor Francesc Vilarino Guell | Agosto 2021

Pluma Francis Villarino

Uno de los principios de Jetpack Compose es hoist Estado, es decir, mueva el estado combinable fuera del estado combinable y empújelo más hacia arriba, haciendo que el combinable sea apátrida. La creación de composiciones sin estado conduce a componentes que son más fáciles de reutilizar y probar.

En este artículo, veremos cómo crear un componible para mejorar su estado, al tiempo que proporcionamos una implementación de estado predeterminado, que se puede usar cuando el valor predeterminado satisfaga nuestras necesidades.

Que queremos lograr Una generacións Campo de entrada de correo electrónico, cuando el correo electrónico no es válido, se muestra una etiqueta de error a continuación, como se muestra a continuación

Si el texto es válido (para este artículo, también tratamos los espacios en blanco como válidos), la etiqueta de error no se mostrará y el campo de entrada no estará en estado de error. En este artículo, lo mantendremos simple e intentaremos minimizar las opciones en elementos combinables.

La primera solución que puede venir a la mente es usar su propio estado interno para implementar esta componibilidad para manejar la verificación del correo electrónico. El principio básico aquí es que si desea utilizar este componible en varios lugares, no desea implementar la verificación cada vez que usa el componible, por lo que agregar el estado directamente al componible puede parecer un enfoque razonable (no lo es). Veamos cómo usar el estado interno para lograr tal componibilidad:

Tal componible se usaría así:

Solo podemos proporcionar la dirección de correo electrónico inicial, pero no podemos ver el control de actualización o verificación del campo de entrada, lo que hace que esta componibilidad sea rígida. Llevémoslo al siguiente nivel y hagamos que la combinación sea más flexible.

El siguiente paso es promover el estado para que lo componible se convierta en apátrida y la persona que llama sea responsable de proporcionar el estado. Para hacer esto, necesitamos aceptar un valor (dirección de correo electrónico en este caso) como parámetro, y debemos exponer una devolución de llamada para que la persona que llama pueda manejar el estado de actualización (correo electrónico) cuando el usuario cambie la entrada.

Si aplicamos este principio a nuestra componibilidad, eventualmente obtendremos este resultado:

Hemos eliminado el estado de la composición y ahora transferimos esta responsabilidad a la persona que llama. Este combinable solo es responsable de mostrar el contenido y notificar a la persona que llama la actualización del campo de entrada.Cualquier cambio en el estado (cambios en el campo de correo electrónico o su validez) ahora está fuera del alcance de este combinable.

Ahora, cuando llamamos componible, necesitamos proporcionar estado y verificación. Para usar este componible, haríamos algo como esto:

Ahora podemos controlar y ver completamente el contenido y el estado de verificación de los campos de correo electrónico; esto hace que la combinación sea más flexible, por ejemplo, podemos implementar diferentes estrategias de verificación para diferentes escenarios. Nuestra devolución de llamada será notificada cada vez que el usuario actualice el campo de correo electrónico, y calcularemos si el correo electrónico es válido cada vez que se actualice.El valor actualizado del correo electrónico y el resultado de la verificación se utilizan en la combinación para actualizar el campo del correo electrónico y mostrarlo u ocultarlo. Invalid Field Campo de texto.

En otras palabras, esta solución no es perfecta, si queremos usar esta combinación en varios lugares, necesitamos lidiar con el estado de todos estos lugares y podemos replicar la misma lógica en nuestra aplicación.

¿Existe una mejor manera de lidiar con este problema? Bueno, me alegro de que lo hayas preguntado, así es, veamos cómo podemos mejorar nuestro estado de personalización cuando lo necesitemos, al tiempo que tenemos algunos valores predeterminados que podemos aprovechar en la mayoría de los casos.

El primer paso para lograr este objetivo es definir un estado interface —— Comencemos con esto. En nuestro ejemplo, hay 2 elementos que definen nuestro estado, email Campo y si es válido:

Tenga en cuenta que al utilizar la convención Jetpack Compose, esta interfaz de estado se denomina componible State Agregue al final.

A continuación, crearemos una implementación de esta interfaz para proporcionar autenticación predeterminada para situaciones en las que no se requiere personalización:

Echemos un vistazo rápido:

  1. Definimos un privado mutableStateOf Guarde el valor del correo electrónico, inicializado con el valor que recibimos en el constructor, el valor predeterminado es una cadena vacía. Exponemos una propiedad pública para obtener y establecer el valor del correo electrónico, y siempre que se actualice, calcularemos si es válido. El valor del correo electrónico es observable.
  2. Definimos un segundo mutableStateOf por isValid sitio. Este valor es de solo lectura porque proviene del correo electrónico. También exponemos una propiedad pública para que pueda ser observada.
  3. Esta es nuestra lógica estándar de verificación de correo electrónico.
  4. Brindamos un programa de protección para que el estado pueda ser almacenado y restaurado al momento de recrear actividades o fragmentos que albergan nuestro componible.
  5. El país necesitará remembered, por lo que también tenemos una función de utilidad para recordar nuestro estado y usar un protector para guardar su contenido.Tenga en cuenta que siguiendo la convención estándar de Jetpack Compose, este método lleva el nombre de remember.

A continuación, podemos reescribir nuestra cartera de correos electrónicos para aceptar este estado y usar su valor para impulsar la interfaz de usuario. En otras palabras, estamos reemplazando valores de correo electrónico, indicadores válidos y devoluciones de llamada con nuestro estado. Una vez que refactorizamos nuestro componible, se verá así:

Podemos ver que aceptamos uno state Tipos de EmailInputFieldState Lo usamos por defecto para nuestra implementación estándar. Ahora, cuando el usuario actualiza el campo de entrada de correo electrónico, actualizamos el campo de correo electrónico del estado, que a su vez activa el cálculo de la validez del correo electrónico, que luego se usa para determinar si debemos mostrar el campo de error.

Con esta solución, si la verificación de correo electrónico predeterminada es útil para nosotros, no necesitamos procesar la lógica en cada sitio de llamada, podemos dejar que el estado predeterminado maneje la entrada por nosotros.

Para usar este widget, lo agregamos a nuestro árbol de cartera de la siguiente manera:

Si queremos una verificación de correo electrónico personalizada, podemos crear nuestra implementación EmailInputFieldState Y proporcione componible.

Tenga en cuenta que al usar esta implementación también podemos observar el valor del campo de correo electrónico y su validez, mientras que usamos la implementación de estado predeterminada, solo necesitamos crear una instancia del estado fuera del componible y luego proporcionarlo en el constructor. El siguiente fragmento de código muestra cómo hacer esto y muestra un campo de texto debajo del correo electrónico componible que indica cuál es la dirección de correo electrónico actual y si es válida:

Usamos el proporcionado rememberEmailInputFieldState Método para obtener una instancia del estado, y luego proporcionamos este estado para componible y lo usamos para mostrar el valor actual y su validez.

Con esta solución, tenemos lo mejor de ambos mundos, tenemos una combinación que se puede usar tal cual y manejar el estado por nuestra cuenta, mientras nos permite observar el estado y brindar opciones personalizadas al permitir que la persona que llama proporcione las suyas propias. implementación del estado Predeterminado El valor no se ajusta a la situación que necesitamos.

La implementación completa y el uso de ejemplo de este componible son los siguientes:

Este es el resultado:

¡Feliz codificación!

LEER  Llame a Numarasıyla Instagram Hesa ​​bı Bulma 2021 | Por Bill Gires | Agosto 2021

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