根据用户切换开关显示或隐藏密码

您可以创建一个图标,以便根据用户的切换开关隐藏或显示密码,从而提高安全性并提升用户体验。

版本兼容性

此实现要求将项目 minSDK 设置为 API 级别 21 或更高级别。

依赖项

根据用户切换开关显示或隐藏密码

如需根据用户切换开关显示或隐藏密码,请创建用于输入信息的输入字段,并为切换开关使用可点击的图标:

@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 }
                )
            }
        }
    )
}

代码要点

  • showPassword 中维护密码可见性状态。
  • 使用 BasicSecureTextField 可组合项输入密码。
  • 具有可点击的尾随图标,用于切换 showPassword 的值。
  • 根据 showPassword 的状态定义 textObfuscationMode 属性和尾随图标的可见/不可见状态。

结果

图 1. 切换显示/隐藏密码图标。

包含本指南的集合

本指南属于以下精选快速入门集合,这些集合涵盖了更广泛的 Android 开发目标:

文字对任何界面都属于核心内容。了解在应用中呈现文本的不同方式,以提供愉悦的用户体验。
了解如何实现用户通过输入文本和使用其他输入方式与您的应用互动的方式。

有问题或反馈

请访问我们的常见问题解答页面,了解简短指南,或与我们联系,告诉我们您的想法。