หน้านี้ได้รับการแปลโดย Cloud Translation API

เปลี่ยน

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

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

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

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

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

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

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

ตัวอย่างต่อไปนี้คือการใช้งาน Composable Switch เพียงเล็กน้อย

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

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

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

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

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

Switch พื้นฐานที่เลือกไว้ — **รูปที่ 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 เนื้อหา