स्नैकबार कॉम्पोनेंट, स्क्रीन पर सबसे नीचे दिखने वाली एक छोटी सूचना होती है. यह उपयोगकर्ता अनुभव में रुकावट डाले बिना, किसी कार्रवाई या ऐक्टिविटी के बारे में सुझाव/राय या शिकायत के तौर पर जानकारी देता है. स्नैकबार कुछ सेकंड बाद गायब हो जाते हैं. उपयोगकर्ता, किसी कार्रवाई के ज़रिए भी इन्हें खारिज कर सकता है. जैसे, किसी बटन पर टैप करके.
यहां तीन ऐसे उदाहरण दिए गए हैं जिनमें स्नैकबार का इस्तेमाल किया जा सकता है:
- कार्रवाई की पुष्टि करना: जब कोई उपयोगकर्ता ईमेल या मैसेज मिटाता है, तो स्नैकबार दिखता है. इससे कार्रवाई की पुष्टि होती है और वापस लाएं विकल्प मिलता है.
- नेटवर्क की स्थिति: जब ऐप्लिकेशन का इंटरनेट कनेक्शन टूट जाता है, तो स्नैकबार दिखता है. इससे पता चलता है कि ऐप्लिकेशन अब ऑफ़लाइन है.
- डेटा सबमिट करना: फ़ॉर्म सबमिट करने या सेटिंग अपडेट करने के बाद, स्नैकबार दिखता है. इससे पता चलता है कि बदलाव सेव हो गया है.
सामान्य जानकारी
स्नैकबार लागू करने के लिए, सबसे पहले SnackbarHost बनाएं. इसमें a
SnackbarHostState प्रॉपर्टी शामिल होती है. SnackbarHostState से,
showSnackbar() फ़ंक्शन का ऐक्सेस मिलता है. इसका इस्तेमाल, स्नैकबार दिखाने के लिए किया जा सकता है.
इस सस्पेंडिंग फ़ंक्शन के लिए, CoroutineScope की ज़रूरत होती है. जैसे,
rememberCoroutineScope से मिलने वाला स्कोप. साथ ही, यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में, यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में, Scaffold में
show a 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: इससे पता चलता है कि उपयोगकर्ता ने कार्रवाई बटन पर क्लिक किए बिना, स्नैकबार को खारिज कर दिया है.