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 w zależności od ustawienia użytkownika, aby zwiększyć bezpieczeństwo i poprawić wygodę.

Wyniki

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

Zgodność wersji

Ta implementacja wymaga, aby minSDK projektu było ustawione na poziom API 21 lub wyższy.

Zależności

Wyświetlanie lub ukrywanie hasła w zależności od ustawienia użytkownika

Aby wyświetlać lub ukrywać hasło w zależności od ustawienia użytkownika, utwórz pole do wprowadzania danych 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 wprowadzania hasła używa elementu kompozycyjnego BasicSecureTextField.
  • Ma klikalną ikonę końcową, która przełącza wartość showPassword.
  • Definiuje atrybut textObfuscationMode oraz stan widoczności/niewidoczności ikony końcowej na podstawie stanu showPassword.

Kolekcje zawierające ten przewodnik

Ten przewodnik jest częścią tych wybranych kolekcji krótkich przewodników, które obejmują szersze cele związane z tworzeniem aplikacji na Androida:

Tekst wyświetlany

Tekst jest centralnym elementem każdego interfejsu. Dowiedz się, jak prezentować tekst w aplikacji, aby zapewnić użytkownikom jak najlepsze wrażenia.
Kolekcja krótkich przewodników
Dowiedz się, jak implementować sposoby interakcji użytkowników z aplikacją przez wprowadzanie tekstu i korzystanie z innych metod wprowadzania danych.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i dowiedz się więcej o krótkich przewodnikach lub skontaktuj się z nami i podziel się swoimi przemyśleniami.
Otwórz najczęstsze pytania Prześlij opinię