Passwort je nach Nutzerauswahl ein- oder ausblenden

Sie können ein Symbol erstellen, um ein Passwort basierend auf einem Nutzer-Schalter auszublenden oder anzuzeigen, um die Sicherheit zu verbessern und die Nutzerfreundlichkeit zu erhöhen.

Versionskompatibilität

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

Abhängigkeiten

Passwort je nach Nutzerauswahl ein- oder ausblenden

Wenn Sie ein Passwort basierend auf einer Nutzerauswahl anzeigen oder ausblenden möchten, erstellen Sie ein Eingabefeld für die Eingabe von Informationen und verwenden Sie ein anklickbares Symbol für die Auswahl:

@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

  • Der Status der Passwortsichtbarkeit in showPassword bleibt erhalten.
  • Verwendet ein BasicSecureTextField-Element für die Passworteingabe.
  • Hat ein anklickbares Endsymbol, mit dem der Wert von showPassword umgeschaltet wird.
  • Hiermit wird das Attribut textObfuscationMode und der Sichtbarkeitsstatus des nachgestellten Symbols durch den Status von showPassword definiert.

Ergebnisse

Abbildung 1: Das Symbol zum Ein- und Ausblenden des Passworts aktivieren oder deaktivieren.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Anzeigetext

Text ist ein zentrales Element jeder Benutzeroberfläche. Hier erfahren Sie, wie Sie Text in Ihrer App präsentieren können, um die Nutzerfreundlichkeit zu verbessern.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie Nutzern die Möglichkeit geben, durch Eingabe von Text und andere Eingabemethoden mit Ihrer App zu interagieren.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

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