Avec l'introduction de la boîte à outils "Jetpack Compose", les développeurs Android disent adieu aux anciennes mises en page XML. La description déclarative des interfaces utilisateur simplifie la création d'écrans, la liaison des données et la réutilisabilité.

Malgré les nombreux avantages de Jetpack Compose , certains cas d'utilisation nécessitent encore beaucoup de code. Je m'en suis rendu compte en particulier lorsque j'ai voulu créer un formulaire plus grand pour une application Android. Dans cette histoire, j'aimerais vous montrer comment créer un formulaire très simple avec Jetpack Compose.

Vous êtes probablement également intéressé par ma prochaine histoire , dans laquelle je vais vous montrer une bibliothèque auto-développée avec laquelle vous pouvez créer des formulaires plus complexes avec des validateurs et des liaisons de données avec le moins de code possible.

Champ de texte simple

L'exemple suivant est un exemple Android officiel pour un composable TextField simple .

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

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

Séparation des préoccupations

Eh bien, ce champ de texte fonctionne parfaitement. Cependant, dans un cas d'utilisation normal, je suis souvent intéressé par plus que la fonctionnalité de base d'un champ de texte. Par exemple, j'aimerais souvent ajouter des validateurs aux champs de formulaire.

Je souhaite également suivre les principes d'architecture standardisés d'Android et séparer les différentes couches. Je veux donc avoir les données dans un ViewModel avec un UiState.

L'exemple suivant montre à nouveau un simple champ de texte avec un "validateur de longueur minimale". Cet exemple suit également les principes d'architecture standardisés.

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

Composer une bibliothèque de formulaires

Avec la bibliothèque open source auto-développée Compose Form, il est très facile de créer un formulaire avancé, qui suit les principes d'architecture standardisés, avec plusieurs champs, sélecteurs, validateurs et diverses autres fonctionnalités.
Lisez ma prochaine histoire pour savoir comment utiliser et personnaliser Compose Form.

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