Actualización de la interfaz de usuario mediante la administración de estado en Jetpack compose | de Saurabh Pantalones | mayo 2022

¡Es hora de un cambio!

Fuente: Hypertec DirectEsta publicación es una continuación del artículo TimerApp — Parte 1 en el que creamos una pantalla de selección de temporizador en Jetpack Compose. Si no lo has leído y quieres echarle un vistazo, lee aquí. Bien, esto es lo que vamos a lograr: vamos a elegir una hora cada vez que un usuario presione una tecla numérica. Los siguientes puntos deben ser observados durante el desarrollo

• Cada número se suma desde el extremo derecho, que corresponde a la fracción de segundo derecha.
• Agregar números desplaza los números ya ingresados ​​un lugar a la izquierda.
• Tan pronto como se ocupe/llene el bit de hora restante, no se aceptarán más entradas.
• Simplemente ingresando un solo número, el color de la pantalla de tiempo cambia de gris a azul, y al eliminar todos los números, cambia de azul a gris.
• La tecla de doble cero solo agrega dos ceros si hay espacio para ambos ceros, de lo contrario no pasa nada.

PD: No entraré en el diseño del teclado y las devoluciones de llamada. Para obtener estos detalles, consulte aquí. Entonces, como podemos ver, nuestro elemento básico de la interfaz de usuario aquí será el texto con dos ceros y el texto de la unidad de tiempo y, si los repetimos tres veces, obtendremos nuestra pantalla de tiempo. Así que llamémoslo TimeDisplayUnit cuyo constructor contiene @Composablefun TimeDisplayUnit(time: TimeUnit = TimeUnit(),unit: String,textColor: Color = GRAY_TEXT).Tiempo: unidad de tiempo — Esta es una clase de datos que contiene nuestros dos dígitos, es decir, una clase de datos izquierda y derecha TimeUnit(val leftDigit: Int = 0,val rightDigit: Int = 0,)Unidad: cadena de caracteres — Nombre de la unidad de tiempo que se mostrará, es decir, s para segundos y así sucesivamente.color del texto: color — Color para el texto en la unidad de visualización de tiempo componible. Ahora vamos a crear una clase de datos TimeData que contendrá nuestros datos para el tiempo seleccionado. Aquí tenemos tres funciones de ayuda que discutiremos más adelante en este artículo. Entonces, la clase de datos se explica por sí misma. Contiene unidades de tiempo para horas, minutos y segundos. var timeState = mutableStateOf(TimeData()) Creamos un estado de tiempo de TimeData. Actualizamos este estado en nuestro modelo de vista y observamos este estado en nuestro composable.val timeState of Remember {viewModel.timeState}….Box {TimeDisplay(time = timeState,)} ….TimeDisplay es nuestro componible que contiene tres unidades de visualización de tiempo. Así que ahora hemos pasado nuestro estado a nuestras unidades de visualización. Recoger correctamente nuevos números y moverlos hacia la izquierda requiere algo de lógica. Aquí simplemente cambiamos cada número a su número vecino y así sucesivamente como se muestra en el diagrama a continuación. El único problema aquí es que tenemos que empezar a cambiar desde el dígito de la hora.Aquí está el código para la lógica anterior. Esta función es lo contrario de lo que hicimos en el paso 4. Simplemente comenzamos a cambiar primero desde el segundo dígito y agregamos un cero al dígito de la hora izquierda.Aquí está el código para la lógica anterior. Debemos evitar el sobrellenado y el vacío borrado. Ahora veamos las tres funciones que creamos en nuestra clase TimeData. En caso de eliminación, primero verificamos si los datos están vacíos, luego simplemente regresamos. En el caso de una adición, verificamos si los datos están completos y luego regresamos también. Ahora consideramos los datos como llenos cuando el dígito de las horas restantes es mayor que cero, y los datos como vacíos cuando todos los dígitos son cero. ¡Eso es todo! Ahora, si ejecuta la aplicación, verá que los números se desplazan hacia la izquierda y hacia la derecha correctamente y se ajustan a nuestras restricciones. ¡Asi que! eso fue fácil. Hemos gestionado con éxito el estado de nuestros datos de tiempo y hemos actualizado la interfaz de usuario en consecuencia. El código fuente completo de la aplicación del temporizador se puede encontrar en el repositorio a continuación. Para obtener más información sobre el enfoque, lea el siguiente enlace. ¡Espero que ayude! Hasta la próxima… ¡Salud!