É possível criar um ícone para ocultar ou mostrar uma senha com base em uma chave de usuário para melhorar a segurança e a experiência do usuário.
Compatibilidade de versões
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.
Dependências
Mostrar ou ocultar uma senha com base no botão de alternância do usuário
Para mostrar ou ocultar uma senha com base em uma alternância do usuário, crie um campo de entrada para inserir informações e use um ícone clicável para a alternância:
@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 } ) } } ) }
Pontos principais sobre o código
- Mantém o estado de visibilidade da senha em
showPassword
. - Usa um elemento combinável
BasicSecureTextField
para a entrada de senha. - Tem um ícone de cauda clicável, que alterna o valor de
showPassword
. - Define o atributo
textObfuscationMode
e o estado visível/invisível do ícone de cauda pelo estado deshowPassword
.
Resultados
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pt-br)
Texto de exibição
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pt-br)