Güvenliği artırmak ve kullanıcı deneyimini iyileştirmek için kullanıcının açma/kapatma düğmesine göre şifreyi gizleyecek veya gösterecek bir simge oluşturabilirsiniz.
Sürüm uyumluluğu
Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.
Bağımlılıklar
Kullanıcının açma/kapatma düğmesine göre şifreyi gösterme veya gizleme
Bir şifreyi kullanıcının açma/kapatma düğmesine göre göstermek veya gizlemek için bilgi girmek üzere bir giriş alanı oluşturun ve açma/kapatma düğmesi için tıklanabilir bir simge kullanın:
@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 } ) } } ) }
Kodla ilgili önemli noktalar
showPassword
'te şifre görünürlüğü durumunu korur.- Şifre girişi için
BasicSecureTextField
bileşeni kullanır. showPassword
değerini değiştiren tıklanabilir bir son simgesi vardır.showPassword
durumuna göretextObfuscationMode
özelliğini ve son simgesinin görünür/görünmez durumunu tanımlar.
Sonuçlar
Bu kılavuzu içeren koleksiyonlar
Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=tr)
Görünen metin
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=tr)