ปุ่มเปิด/ปิดใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ

คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer นั้น ToggleButton เป็นคอมโพเนนต์แบบอินเทอร์แอกทีฟ ที่เปลี่ยนลักษณะที่ปรากฏตามสถานะที่เลือก ปุ่มเปิด/ปิดได้รับการปรับให้เหมาะกับแว่นตา Display เพื่อให้การเปลี่ยนภาพมีความชัดเจนทั้งในด้านรูปร่างและสี การเปลี่ยนภาพเหล่านี้จะบ่งบอกว่าการดำเนินการหรือการตั้งค่าใดทำงานอยู่

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

นอกจากนี้ยังมีปุ่มมาตรฐานและปุ่มไอคอนสำหรับกรณีการใช้งานอื่นๆ ด้วย

กายวิภาคศาสตร์

ปุ่มเปิด/ปิดประกอบด้วยคอนเทนเนอร์ที่เปลี่ยนรูปร่างระหว่างสถานะต่างๆ และป้ายกำกับที่มีไอคอนที่ไม่บังคับ

ขนาด

ปุ่มเปิด/ปิดรองรับตัวเลือกขนาด 2 แบบเช่นเดียวกับปุ่มมาตรฐาน

ค่าเริ่มต้นของปุ่มเปิด/ปิด

โดยค่าเริ่มต้น ปุ่มเปิด/ปิดจะใช้ ToggleButtonDefaults.animateShape ซึ่งจะสร้างการเปลี่ยนภาพที่ราบรื่นระหว่างสถานะต่อไปนี้

• ไม่ได้เลือก: GlimmerTheme.shapes.large (โดยปกติจะเป็น CircleShape)
• เลือก: ToggleButtonDefaults.CheckedShape (RoundedCornerShape ที่มีมุม 20.dp)

คลาส ToggleButtonColors จะจัดการความละเอียดของสีสำหรับสถานะต่อไปนี้

• ไม่ได้เลือก: ค่าเริ่มต้นคือ GlimmerTheme.colors.surface.
• เลือก: ค่าเริ่มต้นคือ GlimmerTheme.colors.surface

แอนิเมชัน

ปุ่มเปิด/ปิดใช้ค่าเริ่มต้นต่อไปนี้สำหรับแอนิเมชัน

• animateShape: ให้ Shape ที่ประมาณขนาดมุมโดยใช้สเปคแอนิเมชันแรงสปริง (stiffness = 600f)
• colors: ฟังก์ชัน Factory สำหรับปรับแต่งสีพื้นหลังและสีเนื้อหาสำหรับทั้ง 2 สถานะ
• CheckedShape: RoundedCornerShape(20.dp) แบบคงที่ที่ใช้สำหรับสถานะที่เลือก
• contentPadding: สืบทอดจาก ButtonDefaults.contentPadding

ตัวอย่าง: ปุ่มเปิด/ปิด

โค้ดต่อไปนี้จะสร้างปุ่มเปิด/ปิดพื้นฐาน

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

ตัวอย่าง: ปุ่มเปิด/ปิดที่มีไอคอนด้านหน้า

โค้ดต่อไปนี้จะสร้างปุ่มเปิด/ปิดที่มีไอคอนด้านหน้า

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt