사용자 전환에 따라 비밀번호 표시 또는 숨기기

사용자 전환에 따라 비밀번호를 숨기거나 표시하는 아이콘을 만들어 보안을 개선하고 사용자 환경을 향상할 수 있습니다.

결과

그림 1. 비밀번호 표시 및 숨기기 아이콘을 전환합니다.

버전 호환성

이 구현에서는 프로젝트 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