Con la introducción del conjunto de herramientas "Jetpack Compose", los desarrolladores de Android se despiden de los antiguos diseños XML. La descripción declarativa de las interfaces de usuario simplifica la creación de pantallas, el enlace de datos y la reutilización.

A pesar de las muchas ventajas de Jetpack Compose , ciertos casos de uso todavía requieren mucho código. Me di cuenta de esto en particular cuando quería crear un formulario más grande para una aplicación de Android. En esta historia me gustaría mostrarte cómo crear un formulario muy simple con Jetpack Compose.

Probablemente también esté interesado en mi próxima historia , en la que le mostraré una biblioteca de desarrollo propio con la que puede crear formularios más complejos con validadores y vinculación de datos con la menor cantidad de código posible.

campo de texto sencillo

El siguiente ejemplo es un ejemplo oficial de Android para un TextField simple componible.

@Composable
fun SimpleFilledTextFieldSample() {
    var textState by remember { mutableStateOf("Hello") }

    TextField(
        value = textState,
        onValueChange = { textState = it },
        label = { Text("Label") }
    )
}

Separación de intereses

Bueno, este campo de texto funciona perfectamente. Sin embargo, en un caso de uso normal, a menudo estoy interesado en algo más que la funcionalidad básica de un campo de texto. Por ejemplo, a menudo me gustaría agregar validadores a los campos de formulario.

También quiero seguir los principios de la arquitectura estandarizada de Android y separar las diferentes capas. Por lo tanto, quiero tener los datos en un ViewModel con un UiState.

El siguiente ejemplo muestra nuevamente un campo de texto simple con un "validador de longitud mínima". Este ejemplo también sigue los principios de la arquitectura estandarizada.

data class MainUiState(
    val currentName: String = "",
    val currentNameErrors: MutableList<String> = mutableListOf(),
)
class MainViewModel: ViewModel() {
    // Main UI state
    private val _uiState = MutableStateFlow(MainUiState())
    val uiState: StateFlow<MainUiState> = _uiState.asStateFlow()

    fun updateName(name: String) {
        val errors = mutableListOf<String>()
        if (name.length < 4) {
            errors.add("The name must be at least 4 characters.")
        }
        _uiState.value = _uiState.value.copy(
            currentName = name,
            currentNameErrors = errors
        )
    }
}
class MainActivity : ComponentActivity() {
    // ...
    
    @Composable
    fun SimpleFilledTextFieldSample(
        mainViewModel: MainViewModel = viewModel()
    ) {
        val mainUiState by mainViewModel.uiState.collectAsState()
        Column(modifier = Modifier.padding(16.dp)) {
            TextField(
                value = mainUiState.currentName,
                singleLine = true,
                modifier = Modifier.fillMaxWidth(),
                onValueChange = { mainViewModel.updateName(it) },
                label = { Text(text = "Enter your Name") },
                isError = mainUiState.currentNameErrors.isNotEmpty()
            )
            mainUiState.currentNameErrors.forEach {
                Text(
                    modifier = Modifier.padding(vertical = 8.dp),
                    text = it,
                    color = Color.Red
                )
            }
        }
    }
}

Redactar biblioteca de formularios

Con la biblioteca de código abierto de desarrollo propio Compose Form es muy fácil crear un formulario avanzado, que sigue los principios de la arquitectura estandarizada, con múltiples campos, selectores, validadores y varias otras características.
Lea mi próxima historia para aprender a usar y personalizar Compose Form.

https:///@benlue/advanced-forms-in-android-with-compose-form-154ee0bff65b