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