अगर आपको बॉटम शीट लागू करनी है, तो ModalBottomSheet
कॉम्पोज़ेबल का इस्तेमाल किया जा सकता है.
content
स्लॉट का इस्तेमाल किया जा सकता है. यह कॉलम में शीट कॉन्टेंट के कॉम्पोज़ेबल को लेआउट करने के लिए, ColumnScope
का इस्तेमाल करता है:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
प्रोग्राम के हिसाब से शीट को बड़ा और छोटा करने की प्रोसेस, SheetState
का इस्तेमाल करके की जाती है. rememberSheetState
का इस्तेमाल करके, SheetState
का एक इंस्टेंस बनाया जा सकता है. यह इंस्टेंस, sheetState
पैरामीटर के साथ ModalBottomSheet
को भेजा जाना चाहिए. SheetState
, show
और
hide
फ़ंक्शन के साथ-साथ, मौजूदा शीट की स्थिति से जुड़ी प्रॉपर्टी का ऐक्सेस भी देता है. इन सस्पेंड करने वाले फ़ंक्शन के लिए, CoroutineScope
की ज़रूरत होती है — उदाहरण के लिए, rememberCoroutineScope
का इस्तेमाल करना — और इन्हें यूआई इवेंट के जवाब में कॉल किया जा सकता है. बॉटम शीट को छिपाने के बाद, ModalBottomSheet
को कॉम्पोज़िशन से ज़रूर हटाएं.
val sheetState = rememberModalBottomSheetState() val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } Scaffold( floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show bottom sheet") }, icon = { Icon(Icons.Filled.Add, contentDescription = "") }, onClick = { showBottomSheet = true } ) } ) { contentPadding -> // Screen content if (showBottomSheet) { ModalBottomSheet( onDismissRequest = { showBottomSheet = false }, sheetState = sheetState ) { // Sheet content Button(onClick = { scope.launch { sheetState.hide() }.invokeOnCompletion { if (!sheetState.isVisible) { showBottomSheet = false } } }) { Text("Hide bottom sheet") } } } }