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

इन XR डिवाइसों पर लागू होता है

इस गाइड की मदद से, इन तरह के एक्सआर डिवाइसों के लिए अनुभव बनाए जा सकते हैं.

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

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

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

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

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

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

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

आकार

स्टैंडर्ड बटन की तरह, टॉगल बटन में दो साइज़ वैरिएंट होते हैं:

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

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

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

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) }
    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