เปลี่ยน

คอมโพเนนต์ Switch ช่วยให้ผู้ใช้สลับระหว่าง 2 สถานะได้ ได้แก่ เลือกแล้ว และไม่ได้เลือก ในแอป คุณอาจใช้สวิตช์เพื่อให้ผู้ใช้ทำอย่างใดอย่างหนึ่งต่อไปนี้

เปิดหรือปิดการตั้งค่า
เปิดหรือปิดใช้ฟีเจอร์
เลือกตัวเลือก

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

ตัวอย่างคอมโพเนนต์สวิตช์ในทั้งโหมดสว่างและโหมดมืด — **รูปที่ 1** คอมโพเนนต์สวิตช์

การใช้งานพื้นฐาน

ดูคำจำกัดความ API ทั้งหมดได้ที่ข้อมูลอ้างอิงของ Switch ต่อไปนี้คือ พารามิเตอร์หลักบางส่วนที่คุณอาจต้องใช้

checked: สถานะเริ่มต้นของสวิตช์
onCheckedChange: การเรียกกลับที่จะเรียกใช้เมื่อสถานะของ สวิตช์มีการเปลี่ยนแปลง
enabled: การเปิดหรือปิดใช้สวิตช์
colors: สีที่ใช้สำหรับสวิตช์

ตัวอย่างต่อไปนี้เป็นการใช้งาน Composable ของ Switch ในรูปแบบที่เรียบง่ายที่สุด

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}Switch.kt

การใช้งานนี้จะปรากฏดังนี้เมื่อไม่ได้เลือก

สวิตช์พื้นฐานที่ไม่ได้เลือก — **รูปที่ 2** สวิตช์ที่ไม่ได้เลือก

ลักษณะที่ปรากฏเมื่อเลือกมีดังนี้

สวิตช์พื้นฐานที่เลือก — **รูปที่ 3** สวิตช์ที่เลือก

การใช้งานขั้นสูง

พารามิเตอร์หลักที่คุณอาจต้องการใช้เมื่อใช้สวิตช์ขั้นสูงขึ้น มีดังนี้

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
        }
    )
}Switch.kt

ในการใช้งานนี้ ลักษณะที่ไม่ได้เลือกจะเหมือนกับตัวอย่างใน ส่วนก่อนหน้า อย่างไรก็ตาม เมื่อเลือกแล้ว การใช้งานนี้จะปรากฏดังนี้

รูปที่ 4 สวิตช์ที่มีไอคอนที่เลือกแบบกำหนดเอง

สีแบบกำหนดเอง

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

@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,
        )
    )
}Switch.kt

การใช้งานนี้จะปรากฏดังนี้

สวิตช์ที่ใช้พารามิเตอร์สีเพื่อแสดงสวิตช์ที่มีสีแบบกำหนดเองสำหรับทั้งปุ่มเลื่อนและแทร็ก — **รูปที่ 5** สวิตช์ที่มีสีแบบกำหนดเอง

แหล่งข้อมูลเพิ่มเติม

เอกสาร UI เนื้อหา

เปลี่ยน จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ