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