เปลี่ยน

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

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

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

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

การติดตั้งใช้งานขั้นพื้นฐาน

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

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

ตัวอย่างต่อไปนี้เป็นการใช้งาน Switch composable แบบขั้นต่ำ

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

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

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

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

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

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

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

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

  • thumbContent: ใช้เพื่อปรับแต่งลักษณะที่ปรากฏของภาพขนาดย่อเมื่อเลือก
  • colors: ใช้เพื่อปรับแต่งสีของแทร็กและภาพปก

ภาพปกวิดีโอที่ทำเอง

คุณสามารถส่งคอมโพสิเบิลใดก็ได้สำหรับพารามิเตอร์ 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

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

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

สีที่กำหนดเอง

ตัวอย่างต่อไปนี้แสดงวิธีใช้พารามิเตอร์ colors เพื่อเปลี่ยนสีปุ่มเปิด/ปิดและรางของปุ่ม โดยพิจารณาว่าปุ่มเปิด/ปิดเปิดอยู่หรือไม่

@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

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

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

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