स्नैकबार

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

इस्तेमाल के इन तीन मामलों में स्नैकबार का इस्तेमाल करें:

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

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

स्नैकबार को लागू करने के लिए, पहले 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 एपीआई के रेफ़रंस दस्तावेज़.