स्नैकबार

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

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

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

सामान्य उदाहरण

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

इस सस्पेंडिंग फ़ंक्शन के लिए, CoroutineScope की ज़रूरत होती है. जैसे, rememberCoroutineScope से मिला CoroutineScope. इसे यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में कॉल किया जा सकता है, ताकि 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: इससे पता चलता है कि उपयोगकर्ता ने ऐक्शन बटन पर क्लिक किए बिना स्नैकबार को खारिज कर दिया है.