अगर आपको बॉटम शीट लागू करनी है, तो ModalBottomSheet कंपोज़ेबल का इस्तेमाल करें.
content स्लॉट का इस्तेमाल किया जा सकता है. यह ColumnScope का इस्तेमाल करके, कॉलम में शीट के कॉन्टेंट कंपोज़ेबल को लेआउट करता है:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
प्रोग्राम के हिसाब से, शीट की स्थिति को कंट्रोल करना
प्रोग्राम के हिसाब से शीट को बड़ा और छोटा करने के लिए, SheetState का इस्तेमाल करें. SheetState का इंस्टेंस बनाने के लिए, rememberModalBottomSheetState का इस्तेमाल किया जा सकता है. इसे 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") } } } }