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