स्नैकबार

स्नैकबार कॉम्पोनेंट, स्क्रीन पर सबसे नीचे दिखने वाली एक छोटी सूचना के तौर पर काम करता है. यह उपयोगकर्ता अनुभव में रुकावट डाले बिना, किसी कार्रवाई या गतिविधि के बारे में सुझाव/राय देता है. स्नैकबार कुछ सेकंड बाद गायब हो जाते हैं. उपयोगकर्ता, बटन पर टैप करने जैसी किसी कार्रवाई से भी उन्हें खारिज कर सकता है.

इन तीन स्थितियों में स्नैकबार का इस्तेमाल किया जा सकता है:

  • कार्रवाई की पुष्टि: जब कोई उपयोगकर्ता किसी ईमेल या मैसेज को मिटाता है, तो कार्रवाई की पुष्टि करने के लिए एक स्नैकबार दिखता है. इसमें पहले जैसा करें विकल्प भी होता है.
  • नेटवर्क की स्थिति: जब ऐप्लिकेशन का इंटरनेट कनेक्शन बंद हो जाता है, तो एक स्नैकबार पॉप-अप होता है. इससे पता चलता है कि ऐप्लिकेशन अब ऑफ़लाइन है.
  • डेटा सबमिट करना: फ़ॉर्म को सबमिट करने या सेटिंग अपडेट करने के बाद, स्नैकबार में यह सूचना दिखती है कि बदलाव सेव हो गया है.
स्नैकबार यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट के उदाहरण.
पहली इमेज. स्नैकबार के उदाहरण.

बुनियादी उदाहरण

स्नैकबार लागू करने के लिए, पहले SnackbarHost बनाएं. इसमें SnackbarHostState प्रॉपर्टी शामिल होती है. SnackbarHostState, showSnackbar() फ़ंक्शन का ऐक्सेस देता है. इसका इस्तेमाल करके, स्नैकबार को दिखाया जा सकता है.

इस सस्पेंडिंग फ़ंक्शन के लिए, CoroutineScope की ज़रूरत होती है. जैसे, rememberCoroutineScope से मिलने वाला फ़ंक्शन. इसे यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में कॉल किया जा सकता है, ताकि Scaffold में Snackbar को दिखाया जा सके.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    snackbarHostState.showSnackbar("Snackbar")
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

कार्रवाई के साथ स्नैकबार

आपके पास कोई वैकल्पिक कार्रवाई जोड़ने और Snackbar की अवधि में बदलाव करने का विकल्प होता है. snackbarHostState.showSnackbar() फ़ंक्शन, अतिरिक्त actionLabel और duration पैरामीटर स्वीकार करता है. साथ ही, SnackbarResult दिखाता है.

val scope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Scaffold(
    snackbarHost = {
        SnackbarHost(hostState = snackbarHostState)
    },
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show snackbar") },
            icon = { Icon(Icons.Filled.Image, contentDescription = "") },
            onClick = {
                scope.launch {
                    val result = snackbarHostState
                        .showSnackbar(
                            message = "Snackbar",
                            actionLabel = "Action",
                            // Defaults to SnackbarDuration.Short
                            duration = SnackbarDuration.Indefinite
                        )
                    when (result) {
                        SnackbarResult.ActionPerformed -> {
                            /* Handle snackbar action performed */
                        }
                        SnackbarResult.Dismissed -> {
                            /* Handle snackbar dismissed */
                        }
                    }
                }
            }
        )
    }
) { contentPadding ->
    // Screen content
}

snackbarHost पैरामीटर की मदद से, कस्टम Snackbar दिया जा सकता है. ज़्यादा जानकारी के लिए, SnackbarHost एपीआई के संदर्भ दस्तावेज़ देखें.

खास बातें

  • actionLabel = "Action": इससे ऐक्शन बटन का टेक्स्ट सेट होता है.
  • duration = SnackbarDuration.Indefinite: स्नैकबार को तब तक दिखाता है, जब तक उपयोगकर्ता या प्रोग्राम उसे खारिज नहीं कर देता.
  • SnackbarResult.ActionPerformed: इससे पता चलता है कि उपयोगकर्ता ने स्नैकबार के ऐक्शन बटन पर क्लिक किया है.
  • SnackbarResult.Dismissed: इससे पता चलता है कि उपयोगकर्ता ने ऐक्शन बटन पर क्लिक किए बिना, स्नैकबार को खारिज कर दिया.