Wyświetlanie lub ukrywanie hasła na podstawie przełącznika użytkownika

Możesz utworzyć ikonę, która będzie ukrywać lub wyświetlać hasło na podstawie przełącznika użytkownika, aby zwiększyć bezpieczeństwo i wygodę użytkownika.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Wyświetlanie lub ukrywanie hasła na podstawie przełącznika użytkownika

Aby wyświetlać lub ukrywać hasło na podstawie przełącznika użytkownika, utwórz pole tekstowe do wpisywania informacji i użyj klikalnej ikony przełącznika:

@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

Najważniejsze informacje o kodzie

  • Zachowuje stan widoczności hasła w showPassword.
  • Do wpisywania hasła używa się komponentu BasicSecureTextField.
  • Zawiera klikalną ikonę, która umożliwia przełączanie wartości showPassword.
  • Określa atrybut textObfuscationMode oraz stan widoczności ikony końcowej (widoczna lub niewidoczna) na podstawie stanu atrybutu showPassword.

Wyniki

Rysunek 1. przełączanie ikony wyświetlania i ukrywania hasła;

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Tekst wyświetlany

Tekst jest centralnym elementem każdego interfejsu użytkownika. Dowiedz się, jak możesz wyświetlać tekst w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Kolekcja krótkich przewodników
Dowiedz się, jak wdrożyć sposoby interakcji użytkowników z aplikacją przez wpisywanie tekstu i używanie innych metod wprowadzania danych.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię