本頁面由 Cloud Translation API 翻譯而成。

根據使用者切換按鈕顯示或隱藏密碼

您可以建立圖示，根據使用者切換按鈕隱藏或顯示密碼，藉此提升安全性並改善使用者體驗。

版本相容性

這個實作方式需要將專案 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 }
                )
            }
        }
    )
}TextSnippets.kt