Una forma más limpia de interactuar entre Composable y ViewModel en Jetpack Compose | de Saurabh Pantalones | mayo 2022

¡Estar en un estado te hace sereno!

Fuente: https://developer.android.google En Jetpack Compose nos encontramos con estados y eventos cuando tratamos con elementos componibles. Una comprensión clara de ambos hará que su código sea más legible, mantenible y comprobable. En la práctica, tratamos de mantener nuestros componibles sin estado tanto como sea posible. Pero cuando se trata de la interacción entre Composable y View Model, las cosas se complican rápidamente porque estamos llamando directamente a las funciones de View Model. Por instanciaButton(onClick = {if (bankFormViewModel.validateInputs()) { // no es bueno // hacer algo } else { // muestra un error }},) Como se muestra arriba, cuando hacemos clic en el botón, verificamos si nuestras entradas se han validado correctamente o no, y llamamos a la función validateInputs() en el objeto del modelo de vista. Si bien este enfoque funciona bien, ¿qué pasa si necesita hacer un paso más antes de la verificación, que es la validación entrante? Luego terminas escribiendo algunas líneas más de código dentro del botón al hacer clic en sí mismo.Pero, ¿pertenece este cambio a lo componible? Primavera. ¡no es así! Entonces, ¿cuál podría ser una mejor manera de manejar su interacción componible con el modelo de vista? Como se dijo en Thinking in Compose,

La edición manual de vistas aumenta la probabilidad de errores.

Con el mismo pensamiento, podemos manejar las interacciones proporcionando un estado de acción a nuestro modelo de vista componible. Veamos un escenario de ejemplo de creación de una página de formulario de página de detalles bancarios que se ve asíPantalla de formulario bancario Cuando hacemos clic en el botón Enviar en esta pantalla, la aplicación verificará las validaciones de los cuatro campos de texto y mostrará un mensaje de brindis si todos son válidos. Entonces, cuando hacemos clic en el botón, pasamos el estado procesable a nuestro modelo de vista en lugar de llamar directamente a su función de validación. Creamos una clase sellada llamada UIEvent de la siguiente manera: clase sellada UIEvent {clase de datos AccountChanged(val account: String): UIEvent()data class ConfirmAccountChanged(Value ConfirmAccount: String): UIEvent()data class CodeChanged(Value Code: String): UIEvent()Data Class NameChanged(Valor Name: String): UIEvent()Object Send: UIEvent()} La clase indica claramente qué Todas las acciones provienen del componible. Ahora pasamos cada uno de estos estados a nuestro modelo de vista para realizar una acción. En nuestro ejemplo, pasamos el evento Enviar y el botón cambia a Botón(onClick = {bankFormViewModel.onEvent(UIEvent.Submit)},)¡Limpio! ¿No? Incluso si necesitamos hacer algunos pasos adicionales más adelante, podemos hacerlo fácilmente sin tocar nuestra lambda al hacer clic en Composable. Así que vamos a crear la función onEvent en nuestro modelo de vista como este fun onEvent(event: UIEvent) {when(event) { is UIEvent.AccountChanged -> {_uiState.value = _uiState.value.copy(accountNumber = event.account)} is UIEvent .ConfirmAccountChanged -> {_uiState.value = _uiState.value.copy(confirmAccountNumber = event.confirmAccount)} es UIEvent .CodeChanged -> {_uiState.value = _uiState.value.copy(code = event.code)} es UIEvent.NameChanged -> {_uiState.value = _uiState.value.copy(ownerName = event.name)} is UIEvent.Submit -> {validateInputs()}}}La función se explica por sí misma y también es muy fácil de leer. Ahora, la única interacción que tenemos entre Composable y View Model es a través de la función onEvent y algunas otras variables de estado que definimos para los cambios de estado de Composable. Ahora viene la segunda parte en la que necesitamos mantener el estado de los datos de la interfaz de usuario capturados durante la interacción del usuario con las vistas. Por lo tanto, el estado de datos de la interfaz de usuario es una clase de datos que contiene los datos que la interfaz de usuario basó en la clase «validation.data» UIState(val accountNumber: String = «»,val convertAccountNumber: String = «»,val code: String = » » , val ownName: String = «», val hasAccountError: Boolean = false, val hasConfirmAccountError: Boolean = false, val hasCodeError: Boolean = false, val hasNameError: Boolean = false,) Como podemos ver, los cuatro textos contienen datos de campo y actualice los campos de error en función de las validaciones. Estos campos de error luego se usan como estado en nuestro componible y se actualizan solos. Esto nos ayuda a administrar y manipular fácilmente el estado desde el modelo de vista. La última parte que debemos agregar es un flujo que podemos usar para mostrar un brindis en nuestro componible. Para este propósito usamos el flujo común asval validationEvent = MutableSharedFlow() Si todas las entradas se validan con éxito, enviamos el evento asviewModelScope.launch {if (!hasError) {validationEvent.emit(ValidationEvent.Success)}}Este evento es manejado por nuestro componible y muestra un brindis como este: bankFormViewModel.validationEvent.collect { evento ->when(evento) {es ValidationEvent.Success -> {Toast.makeText(context,»Todas las entradas son válidas», Toast.LENGTH_SHORT).show()}}}Ahora que todo nuestro código se está volviendo autoexplicativo, legible y mantenible, a medida que controlamos nuestros estados desde el modelo de vista y hacemos que los componibles no tengan estado. Consulte el código completo de este proyecto de ejemplo a continuación. Espero que esto sea útil. ¡¡Hasta la proxima vez!! ¡De abajo hacia arriba!