Afficher ou masquer le mot de passe en fonction d'un bouton d'activation/de désactivation de l'utilisateur

Vous pouvez créer une icône pour masquer ou afficher un mot de passe en fonction d'un bouton d'activation de l'utilisateur afin d'améliorer la sécurité et l'expérience utilisateur.

Résultats

Figure 1 : Activer/Désactiver l'icône Afficher/Masquer le mot de passe.

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Afficher ou masquer un mot de passe en fonction de l'option activée par l'utilisateur

Pour afficher ou masquer un mot de passe en fonction d'un bouton d'activation utilisateur, créez un champ de saisie pour saisir des informations et utilisez une icône cliquable pour le bouton d'activation :

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}TextSnippets.kt

Points clés concernant le code

Maintient l'état de visibilité du mot de passe dansshowPassword.
Utilise un composable BasicSecureTextField pour la saisie du mot de passe.
Comporte une icône cliquable à la fin, qui active ou désactive la valeur showPassword.
Définit l'attribut textObfuscationMode et l'état visible/non visible de l'icône de fin en fonction de l'état de showPassword.

Collections contenant ce guide

Ce guide fait partie des collections de guides de démarrage rapide organisées qui couvrent des objectifs de développement Android plus larges :

Texte à afficher

Le texte est un élément central de n'importe quelle UI. Découvrez différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.

Collection de guides rapides

Demander une entrée utilisateur

Découvrez comment implémenter des méthodes permettant aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres moyens de saisie.