Bạn có thể tạo một biểu tượng để ẩn hoặc hiện mật khẩu dựa trên nút bật/tắt của người dùng để cải thiện tính bảo mật và nâng cao trải nghiệm người dùng.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Hiện hoặc ẩn mật khẩu dựa trên nút bật/tắt của người dùng
Để hiển thị hoặc ẩn mật khẩu dựa trên nút bật/tắt của người dùng, hãy tạo một trường nhập để nhập thông tin và sử dụng biểu tượng có thể nhấp cho nút bật/tắt:
@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 } ) } } ) }
Các điểm chính về mã
- Duy trì trạng thái hiển thị mật khẩu trong
showPassword
. - Sử dụng thành phần kết hợp
BasicSecureTextField
để nhập mật khẩu. - Có biểu tượng theo sau có thể nhấp vào để bật/tắt giá trị của
showPassword
. - Xác định thuộc tính
textObfuscationMode
và trạng thái hiển thị/không hiển thị của biểu tượng theo trạng thái củashowPassword
.
Kết quả
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)
Văn bản hiển thị
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=vi)