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 chế độ bật/tắt của người dùng nhằm cải thiện tính bảo mật và nâng cao trải nghiệm người dùng.

Kết quả

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

Khả năng tương thích giữa các phiên bản

Việc triển khai này yêu cầu bạn đặt minSDK của dự án thành cấp độ API 21 trở lên.

Phần phụ thuộc

Hiện hoặc ẩn mật khẩu dựa trên chế độ bật/tắt của người dùng

Để hiện hoặc ẩn mật khẩu dựa trên chế độ bật/tắt của người dùng, hãy tạo một trường nhập dữ liệu để nhập thông tin và sử dụng một biểu tượng có thể nhấp vào cho chế độ 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 trong showPassword.
Sử dụng thành phần kết hợp BasicSecureTextField để nhập mật khẩu.
Có một biểu tượng cuối có thể nhấp, biểu tượng này sẽ 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 cuối bằng trạng thái của showPassword.

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 bộ sưu tập Hướng dẫn nhanh được tuyển chọn, 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 trình bày văn bản trong ứng dụng để mang lại trải nghiệm thú vị cho người dùng.

Tuyển tập hướng dẫn nhanh

Yêu cầu hoạt động đầu vào của người dùng

Tìm hiểu cách triển khai các phương thức để người dùng tương tác với ứng dụng của bạn bằng cách nhập văn bản và sử dụng các phương thức nhập khác.