Con l'introduzione del toolkit "Jetpack Compose", gli sviluppatori Android dicono addio ai vecchi layout XML. La descrizione dichiarativa delle interfacce utente semplifica la creazione di schermate, il data binding e la riusabilità.

Nonostante i numerosi vantaggi di Jetpack Compose , alcuni casi d'uso richiedono ancora molto codice. Me ne sono reso conto in particolare quando volevo creare un form più grande per un'app Android. In questa storia vorrei mostrarti come creare un modulo molto semplice con Jetpack Compose.

Probabilmente sei anche interessato alla mia prossima storia , in cui ti mostrerò una libreria autosviluppata con la quale puoi creare moduli più complessi con validatori e data binding con il minor codice possibile.

Campo di testo semplice

L'esempio seguente è un esempio ufficiale di Android per un semplice TextField componibile.

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

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

Separazione degli interessi

Bene, questo campo di testo funziona perfettamente. Tuttavia, in un normale caso d'uso, sono spesso interessato a qualcosa di più della semplice funzionalità di base di un campo di testo. Ad esempio, spesso vorrei aggiungere validatori ai campi del modulo.

Inoltre voglio seguire i principi dell'architettura standardizzata di Android e separare i diversi livelli. Voglio quindi avere i dati in un ViewModel con un UiState.

L'esempio seguente mostra nuovamente un semplice campo di testo con un “validatore di lunghezza minima”. Anche questo esempio segue i principi dell'architettura standardizzata.

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
                )
            }
        }
    }
}

Componi Libreria moduli

Con la libreria open source auto sviluppata Compose Form è molto facile creare un modulo avanzato, che segue i principi dell'architettura standardizzata, con più campi, selettori, validatori e varie altre funzionalità.
Leggi la mia prossima storia per imparare come utilizzare e personalizzare Compose Form.

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