Generalidades

Validación de entrada en Jetpack Compose | Autor: Dennis Ludenko | Agosto de 2021

1*JDMFIMB La0C67hVySe TA
Denis Ludenko

Este artículo no solo se centrará en la verificación manual y automática de la entrada de TextField, sino también en cómo Brindar una buena experiencia de usuario Procesando Muerte del proceso, Incluyendo resaltar el último campo enfocado al restaurar.

Ejemplo de verificación automática

Parte 1: InputWrapper

Parte 2: ViewModel (versión simplificada)

  • Obtenemos un Flujo de estado De Guardar identificador de estado usar.Obtener flujo de estado Encuentra la extensión aquí. usar Guardar identificador de estado aquí Nos permite mantener los datos más recientes después de que se produzca la muerte del proceso. También puede usar getLiveData, que es una cuestión de preferencia personal.
  • areInputsValid Flujo de estado Combinatorio Nombre Y Número de Tarjeta de Crédito Fluye en un solo. El resultado que devuelve depende de si el campo de entrada es válido.Se llamará siempre que haya un nuevo lanzamiento. Nombre o Número de Tarjeta de Crédito fluir. Usaremos su valor para controlar el estado habilitado / deshabilitado de los botones en la combinación.
  • _evento Se utilizará para que se emitan eventos únicos a la capa de visualización. Evento de pantalla Es una clase sellada, que representa todos nuestros eventos únicos.
  • Entrada de nombre Y Número de tarjeta ingresado Se llamará cuando el usuario ingrese un símbolo en TextField.Usamos un Validador de entrada Objetivo.Devuelve el ID de recurso de cadena que contiene el mensaje de error, o Valor nuloEsto último significa que la entrada es válida.Almacenamos nuevos valor Y ID de error usar:

Hay 2 t importantesHPara nosotros.
1) Reagrupe los objetos componibles que están a la espera de actualizaciones.
2) Gatillo areInputsValid Transmita para asegurarnos de que operamos con la información más reciente.

  • Sigue haciendo clic Si la entrada es válida, se emite un evento para mostrar un mensaje de éxito; de lo contrario, se emite un mensaje de error. Se llama en dos situaciones:
    1) Haga clic en el botón.
    2) Encendido ImeAction.Done De Número de Tarjeta de Crédito Campo de texto.

Parte 3: Composable (versión simplificada)

Espero que el código anterior se explique por sí mismo. Ahora veamos qué falta:
1) El teclado no se abre después de ingresar a la pantalla.
2) No Campo de texto Concéntrate en entrar en la pantalla.
3) No hay forma de saber cuál Campo de texto El enfoque final, después del proceso, ocurre la muerte.
4) No acción tratar con Nombre Campo de texto.
5) El teclado no se cerrará después de hacer clic correctamente en el botón.
6) Atención Campo de texto Un clic de botón exitoso no está exento de enfoque.

Parte 1: Ver modelo

  • Campo de texto de enfoque Responsable de almacenar el nombre del último campo de texto de foco conocido.Por defecto es NombrePorque es la primera entrada de arriba a abajo.
  • dentro Bloquear comprobar si existe el último foco conocido Campo de textoSi es así, llama focusOnLastSelectedTextField (). Emite 2 eventos:
    1) Concéntrese en el último conocido Campo de texto.
    2) Visualice el teclado.
  • onTextFieldFocusChanged () Se llama cuando llegamos Campo de texto A partir de eventos enfocados / no enfocados combinables.Almacena el último foco conocido Campo de texto Nombre en Atención Evento y límpielo Inatento evento.
  • onNameImeActionClick () cuando Nombre Campo de texto Está enfocado y el usuario presiona ImeAction.Next. Emite eventos para mover el foco Dirección de enfoque. Abajo Pedido.
  • onContinueClick () -Si la entrada es válida, estamos configurando Campo de texto de enfoque llegar no cualquiera Y envía 2 eventos:
    1) Desenfocar el enfoque actual Campo de texto.
    2) Ocultar el teclado.

Parte 2: Composición

  • Gerente de enfoque Se utiliza para borrar el enfoque actual y moverlo en una dirección determinada.En nuestro caso es Abajo.
  • Controlador de teclado Se usa para ocultar / mostrar el teclado.
  • creditCardNumberFocusRequester Y Solicitud de enfoque de nombreSolicitante de enfoque. Nos permiten solicitar el enfoque de lo componible bajo demanda (por ejemplo, de eventos).
  • Modifier.focusRequester.onFocusChanged – Agregamos solicitante de enfoque y Cambio de enfoque Escuche nuestros modificadores componibles.
  • Valor de campo – Es una clase que guarda información sobre el estado de la edición. El servicio de entrada actualiza la selección de texto, el cursor, el texto y la combinación de texto. Esta clase representa estos valores y permite observar los cambios en estos valores en la composición de edición de texto. Lo necesitamos para colocar el indicador de entrada al final del texto de entrada cuando el proceso muere / solicita el foco si la entrada no está vacía.

Verificación manual

  • en Entrada de nombre Ya no verificamos y siempre configuramos ID de error llegar Valor nulo. Esto lleva a Campo de texto Eliminar error al ingresar / eliminar el primer símbolo.
  • La verificación ocurre en getInputErrorsOrNull () ahora.Vuelve Valor nulo Si la entrada es válida, o error de entrada La clase contiene ID de error.
  • Para mostrar el error, partimos de error de entrada Para nosotros Nombre Y Número de Tarjeta de Crédito fluir.

Redactar versión utilizada: 1.0.1
Herramientas utilizadas para desencadenar la muerte del proceso: veneno
El ejemplo completo se puede encontrar aquí.

LEER  Cosas asequibles o el problema de hacer que las cosas sean asequibles | Autor: Jeff Ogodogun | Diciembre de 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