คุณสามารถสร้างไอคอนเพื่อซ่อนหรือแสดงรหัสผ่านตามการเปิดตัวของผู้ใช้เพื่อปรับปรุงความปลอดภัยและประสบการณ์ของผู้ใช้
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า 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
ผลลัพธ์
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)
ข้อความที่แสดง
ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)
ขอข้อมูลจากผู้ใช้
ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ
หากมีคำถามหรือความคิดเห็น
ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ