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