คอมโพเนนต์ Switch
อนุญาตให้ผู้ใช้สลับระหว่าง 2 สถานะ ได้แก่ เลือกแล้ว
และไม่ได้เลือกไว้ ในแอป คุณอาจใช้สวิตช์เพื่อให้ผู้ใช้ดำเนินการอย่างใดอย่างหนึ่ง
ดังต่อไปนี้:
- สลับการตั้งค่าเป็นเปิดหรือปิด
- เปิดหรือปิดใช้ฟีเจอร์
- เลือกตัวเลือก
คอมโพเนนต์ประกอบด้วย 2 ส่วน ได้แก่ นิ้วหัวแม่มือและส่วนแทร็ก สามารถใช้นิ้วหัวแม่มือที่ลากไปมาได้ ของสวิตช์ และแทร็กนั้นคือพื้นหลัง ผู้ใช้ลากนิ้วโป้งได้ ไปทางซ้ายหรือขวาเพื่อเปลี่ยนสถานะของสวิตช์ พวกเขายังสามารถแตะ เปลี่ยนเพื่อทำเครื่องหมายและล้าง
![ตัวอย่างคอมโพเนนต์สวิตช์ทั้งในโหมดสว่างและโหมดมืด](https://developer.android.google.cn/static/develop/ui/compose/images/components/switches.png?authuser=3&hl=th)
การติดตั้งใช้งานขั้นพื้นฐาน
ดูข้อมูลอ้างอิงของ Switch
สำหรับคำจำกัดความของ API ฉบับเต็ม รายการต่อไปนี้คือ
พารามิเตอร์หลักบางส่วนที่คุณอาจต้องการใช้ ได้แก่
checked
: สถานะเริ่มต้นของสวิตช์onCheckedChange
: Callback ที่เรียกใช้เมื่อสถานะของ การเปลี่ยนแปลงenabled
: เปิดหรือปิดสวิตช์colors
: สีที่ใช้สำหรับสวิตช์
ตัวอย่างต่อไปนี้คือการใช้งาน Composable Switch
เพียงเล็กน้อย
@Composable fun SwitchMinimalExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it } ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้เมื่อยกเลิกการเลือก
![สวิตช์พื้นฐานที่ไม่ได้เลือกไว้](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-deactivated.png?authuser=3&hl=th)
นี่คือลักษณะที่ปรากฏเมื่อเลือก:
![Switch พื้นฐานที่เลือกไว้](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch.png?authuser=3&hl=th)
การติดตั้งใช้งานขั้นสูง
พารามิเตอร์หลักที่คุณอาจต้องการใช้เมื่อใช้ ได้แก่
thumbContent
: ใช้ตัวเลือกนี้เพื่อปรับแต่งรูปลักษณ์ของนิ้วหัวแม่มือเมื่อ มีการทำเครื่องหมายไว้colors
: ใช้ตัวเลือกนี้เพื่อปรับแต่งสีของแทร็กและนิ้วโป้ง
ภาพขนาดย่อที่กำหนดเอง
คุณสามารถส่งผ่าน Composable ใดก็ได้สำหรับพารามิเตอร์ thumbContent
เพื่อสร้าง
นิ้วโป้ง ต่อไปนี้เป็นตัวอย่างของสวิตช์ที่ใช้ไอคอนที่กำหนดเองสำหรับ
นิ้วโป้ง:
@Composable fun SwitchWithIconExample() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, thumbContent = if (checked) { { Icon( imageVector = Icons.Filled.Check, contentDescription = null, modifier = Modifier.size(SwitchDefaults.IconSize), ) } } else { null } ) }
ในการติดตั้งใช้งานนี้ ลักษณะที่ปรากฏที่ไม่ได้ทำเครื่องหมายจะเหมือนกับตัวอย่างใน หัวข้อก่อนหน้านี้ แต่เมื่อเลือก การติดตั้งนี้จะปรากฏเป็น ดังต่อไปนี้:
![สวิตช์ที่ใช้พารามิเตอร์ thumbContent เพื่อแสดงไอคอนที่กำหนดเองเมื่อเลือก](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-icon.png?authuser=3&hl=th)
สีที่กำหนดเอง
ตัวอย่างต่อไปนี้แสดงวิธีที่คุณสามารถใช้พารามิเตอร์สีเพื่อ เปลี่ยนสีนิ้วหัวแม่มือและแท่นหมุน โดยพิจารณาว่า เลือกสวิตช์แล้ว
@Composable fun SwitchWithCustomColors() { var checked by remember { mutableStateOf(true) } Switch( checked = checked, onCheckedChange = { checked = it }, colors = SwitchDefaults.colors( checkedThumbColor = MaterialTheme.colorScheme.primary, checkedTrackColor = MaterialTheme.colorScheme.primaryContainer, uncheckedThumbColor = MaterialTheme.colorScheme.secondary, uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer, ) ) }
การติดตั้งใช้งานนี้จะปรากฏดังนี้
![สวิตช์ที่ใช้พารามิเตอร์สีเพื่อแสดงสวิตช์ที่มีสีแบบกำหนดเองสำหรับทั้งนิ้วโป้งและแทก](https://developer.android.google.cn/static/develop/ui/compose/images/components/switch-colors.png?authuser=3&hl=th)