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 } ) } } ) }
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 atrybutushowPassword
.
Wyniki
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:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pl)
Tekst wyświetlany
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=pl)