Trang này được dịch bởi Cloud Translation API.

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

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 }
                )
            }
        }
    )
}TextSnippets.kt

Các điểm chính về mã

Duy trì trạng thái hiển thị mật khẩu trongshowPassword.
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ủa showPassword.

Kết quả

Hình 1. Bật/tắt biểu tượng hiển thị và ẩn mật khẩu.

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:

Văn bản hiển thị

Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách khác nhau để trình bày văn bản trong ứng dụng nhằm mang lại trải nghiệm thú vị cho người dùng.

Bộ sưu tập hướng dẫn nhanh