स्नैकबार

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

यहां इस्तेमाल के तीन उदाहरण दिए गए हैं, जहां स्नैकबार का इस्तेमाल किया जा सकता है:

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

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

स्नैकबार लागू करने के लिए, सबसे पहले 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
}
MaterialLayoutSnippets.kt

ऐक्शन वाला स्नैकबार

आपके पास वैकल्पिक कार्रवाई देने और 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
}
MaterialLayoutSnippets.kt

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

प्रमुख बिंदु

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