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

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

ผลลัพธ์

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

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

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

ความสัมพันธ์

แสดงหรือซ่อนรหัสผ่านตามการสลับของผู้ใช้

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

@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

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

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

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

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

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