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

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

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

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

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

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

Discover the latest app development tools, platform updates, training, and documentation for developers across every Android device.

อัปเดตแล้ว Dec 21, 2024

Discover the latest app development tools, platform updates, training, and documentation for developers across every Android device.

อัปเดตแล้ว Dec 20, 2023

Follow best practices, eliminate boilerplate code, and reduce fragmentation

อัปเดตแล้ว Mar 12, 2025