Passwort je nach Nutzerauswahl ein- oder ausblenden

Sie können ein Symbol erstellen, um ein Passwort basierend auf einer Nutzereinstellung ein- oder auszublenden. So können Sie die Sicherheit und die Nutzerfreundlichkeit verbessern.

Ergebnisse

Abbildung 1. Das Symbol zum Ein- und Ausblenden des Passworts wird ein- oder ausgeblendet.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Passwort basierend auf der Nutzereinstellung ein- oder ausblenden

Wenn Sie ein Passwort basierend auf einer Nutzereinstellung ein- oder ausblenden möchten, erstellen Sie ein Eingabefeld zum Eingeben von Informationen und verwenden Sie ein klickbares Symbol für die Einstellung:

@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

Wichtige Punkte zum Code

  • Behält den Status der Passwortsichtbarkeit inshowPasswordbei.
  • Verwendet ein BasicSecureTextField-Composable für die Passworteingabe.
  • Hat ein klickbares Schlusssymbol, mit dem der Wert von showPassword umgeschaltet wird.
  • Definiert das Attribut textObfuscationMode und den sichtbaren/nicht sichtbaren Status des nachgestellten Symbols anhand des Status von showPassword.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

Anzeigetext

Text ist ein zentraler Bestandteil jeder Benutzeroberfläche. Hier finden Sie verschiedene Möglichkeiten, Text in Ihrer App zu präsentieren, um eine ansprechende Nutzererfahrung zu bieten.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie Nutzern die Möglichkeit geben, mit Ihrer App zu interagieren, indem sie Text eingeben und andere Eingabemethoden verwenden.
Sammlung von Kurzanleitungen

Fragen oder Feedback

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich aber auch gern an uns wenden und uns Ihre Meinung mitteilen.
Zu den FAQs Feedback geben