Mostrar ou ocultar a senha com base em uma opção do usuário

Você pode criar um ícone para ocultar ou mostrar uma senha com base em uma alternância do usuário para melhorar a segurança e a experiência do usuário.

Resultados

Figura 1. Alternando o ícone de mostrar e ocultar senha.

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 na 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 }
                )
            }
        }
    )
}
TextSnippets.kt

Pontos principais sobre o código

  • Mantém o estado de visibilidade da senha emshowPassword.
  • Usa um BasicSecureTextField elemento combinável para a entrada de senha.
  • Tem um ícone final clicável, que alterna o valor de showPassword.
  • Define o textObfuscationMode atributo e o estado visível/não visível do ícone final pelo estado de showPassword.

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 do Android:

Mostrar texto

O texto é uma peça central de qualquer interface. Confira diferentes maneiras de apresentar texto no seu app para proporcionar uma experiência agradável ao usuário.
Coleção de guias rápidos
Saiba como implementar maneiras de os usuários interagirem com seu app inserindo texto e usando outros meios de entrada.
Coleção de guias rápidos

Tem dúvidas ou quer dar feedback?

Acesse nossa página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte sua opinião.
Acessar as perguntas frequentes Deixar feedback