स्नैकबार

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

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

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

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

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