แสดงหรือซ่อนรหัสผ่านตามการเปิดตัวของผู้ใช้

คุณสามารถสร้างไอคอนเพื่อซ่อนหรือแสดงรหัสผ่านตามการเปิดตัวของผู้ใช้เพื่อปรับปรุงความปลอดภัยและประสบการณ์ของผู้ใช้

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

แสดงหรือซ่อนรหัสผ่านตามการเปิดตัวของผู้ใช้

หากต้องการแสดงหรือซ่อนรหัสผ่านตามการเปิดตัวของผู้ใช้ ให้สร้างช่องป้อนข้อมูลสำหรับการป้อนข้อมูล และใช้ไอคอนที่คลิกได้สำหรับการเปิดตัว

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

ประเด็นสำคัญเกี่ยวกับรหัส

  • คงสถานะการแสดงรหัสผ่านในshowPassword
  • ใช้คอมโพสิเบิล BasicSecureTextField สำหรับการป้อนรหัสผ่าน
  • มีไอคอนต่อท้ายที่คลิกได้ ซึ่งจะเปิด/ปิดค่าของ showPassword
  • กำหนดแอตทริบิวต์ textObfuscationMode และสถานะแสดง/ซ่อนไอคอนต่อท้ายตามสถานะของ showPassword

ผลลัพธ์

รูปที่ 1 สลับไอคอนแสดงและซ่อนรหัสผ่าน

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ
ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ