Introduction

Ce chapitre dédié aux champs de formulaire a pour objectif de découvrir les composants issus de Compose UI qui permettent à un utilisateur de saisir une information. Il s’attardera en particulier sur : les champs de saisies, les boutons de type radio, les cases à cocher et les boutons de type Switch.

Champs de saisie

Les champs de saisie sont quasiment inévitables dans une application moderne, que ce soit dans un formulaire, pour effectuer une recherche ou encore saisir un message dans une conversation.

Heureusement, pour nous aider à gérer autant de cas d’usage, Compose UI fournit trois composants :

BasicTextField, qui comme son nom l’indique, propose une implémentation fournissant les bases pour effectuer de la saisie de texte.
TextField et OutlinedTextField dont l’implémentation interne utilise le composant BasicTextField mais qui, en plus, permet d’appliquer un style qui s’appuie sur les recommandations de Material Design. Seul le style différencie ces deux boutons comme illustré ci-après.

Voici à quoi ressemblent ces trois composants :

Composant BasicTextField

Composant TextField

Composant OutlinedTextField

Dans ce livre nous utiliserons les composants TextField et Outlined TextField afin de bénéficier des avantages de Material Design. Découvrons maintenant en détail ce qu’il est possible de faire avec ces composants.

Aperçu du composant TextField

Tout d’abord, voyons comment implémenter un champ de saisie de la manière la plus simple possible.

@Composable 
fun SingleTextField() { 
    var text by remember { mutableStateOf("") } 
    TextField( 
        value = text, 
        onValueChange = { 
            text = it 
        } 
    ) 
}

Quelques points à observer dans ce code :

Les deux paramètres obligatoires de ce composant sont value...

Boutons de type radio, cases à cocher et switchs

Boutons de type radio

Les boutons de type radio permettent de sélectionner une seule option parmi plusieurs. Pour réaliser ce type de bouton, Compose UI fournit le composant nommé RadioButton, dont voici la signature :

@Composable 
fun RadioButton( 
    selected: Boolean, 
    onClick: (() -> Unit)?, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionSource: MutableInteractionSource = remember { 
MutableInteractionSource() }, 
    colors: RadioButtonColors = RadioButtonDefaults.colors() 
) { 
/* ... */ 
}

Ci-dessous, une brève description de ses paramètres :

Nom du paramètre	Description du paramètre
selected	Détermine si le bouton radio est sélectionné ou non.
onClick	Lambda appelée lorsque le bouton radio est cliqué.
enabled	Détermine si le bouton radio est sélectionnable ou non. Si false, le composant apparaît visuellement comme désactivé.
interactionSource	Permet d’observer l’ensemble des interactions qui ont lieu avec le bouton radio. Par exemple : l’utilisateur touche le bouton, relâche le bouton, etc. En fonction de cela, nous pouvons personnaliser l’apparence ou le comportement du composant.
colors	Définit les couleurs du bouton radio selon son état : sélectionné, non sélectionné, désactivé.

Ci-dessous voici un exemple de code que nous pourrions écrire pour utiliser ce composant :

@Composable 
fun BasicRadioButtons(modifier : Modifier = Modifier) { 
    val radioOptions = listOf("Blanc", "Rouge"...

Champs de formulaire

Introduction

Champs de saisie

Aperçu du composant TextField

Boutons de type radio, cases à cocher et switchs

Boutons de type radio