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 }
                )
            }
        }
    )
}

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 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.
Tìm hiểu cách triển khai các cách để 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.

Bạn có câu hỏi hoặc ý kiến phản hồi

Hãy truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.