Jetpack Compose Glimmer में टॉगल बटन

XR डिवाइसों पर काम करने वाले ऐप्लिकेशन

इस गाइड से, आपको इन XR डिवाइसों के लिए ऐप्लिकेशन बनाने में मदद मिलती है.

XR डिवाइसों के टाइप के बारे में जानें →

XR डिवाइसों के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, एक ToggleButton एक इंटरैक्टिव कॉम्पोनेंट है जो चुने गए स्टेटस के आधार पर अपनी दिखावट बदलता है. टॉगल बटन, डिसप्ले वाले चश्मों के लिए ऑप्टिमाइज़ किए जाते हैं. इससे, आकार और रंग में साफ़ तौर पर विज़ुअल ट्रांज़िशन दिखते हैं. इन ट्रांज़िशन से पता चलता है कि कोई कार्रवाई या सेटिंग कब चालू है.

टॉगल बटन का इस्तेमाल करके, उन कार्रवाइयों को दिखाया जा सकता है जिन्हें चालू या बंद किया जा सकता है. सिर्फ़ आइकॉन वाले टॉगल के उलट, टॉगल बटन मुख्य तौर पर टेक्स्ट कॉन्टेंट दिखाता है. हालांकि, इसमें अतिरिक्त कॉन्टेक्स्ट के लिए आइकॉन स्लॉट का इस्तेमाल किया जा सकता है.

अन्य इस्तेमाल के मामलों के लिए, सामान्य बटन और आइकॉन बटन भी उपलब्ध हैं.

शरीर-रचना विज्ञान

टॉगल बटन में एक कंटेनर होता है. यह कंटेनर, अलग-अलग स्टेटस के बीच बदलता रहता है. इसके अलावा, इसमें आइकॉन के साथ एक लेबल भी होता है.

आकार

सामान्य बटन की तरह, टॉ0}गल बटन के दो साइज़ उपलब्ध हैं:

टॉगल बटन के लिए डिफ़ॉल्ट सेटिंग

डिफ़ॉल्ट रूप से, टॉगल बटन ToggleButtonDefaults.animateShape का इस्तेमाल करते हैं. इससे, इन स्टेटस के बीच आसानी से ट्रांज़िशन होता है:

• चुना नहीं गया: GlimmerTheme.shapes.large (आम तौर पर, CircleShape).
• चुना गया: ToggleButtonDefaults.CheckedShape (RoundedCornerShape कॉर्नर वाला 20.dp).

ToggleButtonColors क्लास, इन स्टेटस के लिए रंग रिज़ॉल्यूशन मैनेज करती है:

• चुना नहीं गया: डिफ़ॉल्ट रूप से, GlimmerTheme.colors.surface पर सेट होता है.
• चुना गया: डिफ़ॉल्ट रूप से, GlimmerTheme.colors.surface पर सेट होता है.

ऐनिमेशन

टॉगल बटन, ऐनिमेशन के लिए इन डिफ़ॉल्ट सेटिंग का इस्तेमाल करते हैं:

• animateShape: यह एक Shape उपलब्ध कराता है. यह स्प्रिंग ऐनिमेशन स्पेसिफ़िकेशन (stiffness = 600f) का इस्तेमाल करके, कॉर्नर के साइज़ को इंटरपोलेट करता है.
• colors: यह एक फ़ैक्ट्री फ़ंक्शन है. इसका इस्तेमाल करके, दोनों स्टेटस के लिए बैकग्राउंड और कॉन्टेंट के रंगों को पसंद के मुताबिक बनाया जा सकता है.
• 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) }

    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(
                if (checked) FavoriteIcon else OutlinedFavoriteIcon,
                contentDescription = "Toggle favorite"
            )
        },
        onCheckedChange = { checked = it }
    ) {
        Text(if (checked) "On" else "Off")
    }
}
ToggleButtonSamples.kt